<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Logical Properties and Values Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="refining" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This module introduces logical properties and values that provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings. The module defines logical properties and values for the features defined in [[CSS21]]. These properties are writing-mode relative equivalents of their corresponding physical properties." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-logical-1/" rel="canonical">
<style>
  @media (min-width: 40em) {
    #mapping-diagram figure {
      width: 49%;
      float: right;
    }
    #mapping-diagram figure:first-of-type {
      margin-right: 2%;
    }
  }
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Logical Properties and Values Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-logical-1/">https://drafts.csswg.org/css-logical-1/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-logical-1/">https://www.w3.org/TR/css-logical-1/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2017/WD-css-logical-1-20170518/" rel="prev">https://www.w3.org/TR/2017/WD-css-logical-1-20170518/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="49885"><a class="p-name fn u-email email" href="mailto:ratan@microsoft.com">Rossen Atanassov</a> (<span class="p-org org">Microsoft</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-logical-1/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-logical-1">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module introduces logical properties and values that provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings. The module defines logical properties and values for the features defined in <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. These properties are writing-mode relative equivalents of their corresponding physical properties.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-logical” in the title,
	preferably like this:
	“[css-logical] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
    <li>
     <a href="#directional-keywords"><span class="secno">2</span> <span class="content"> Flow-Relative Values: <span class="css">block-start</span>, <span class="css">block-end</span>, <span class="css">inline-start</span>, <span class="css">inline-end</span></span></a>
     <ol class="toc">
      <li><a href="#caption-side"><span class="secno">2.1</span> <span class="content"> Logical Values for the <span class="property">caption-side</span> Property</span></a>
      <li><a href="#float-clear"><span class="secno">2.2</span> <span class="content"> Flow-Relative Values for the <span class="property">float</span> and <span class="property">clear</span> Properties</span></a>
      <li><a href="#text-align"><span class="secno">2.3</span> <span class="content"> Flow-Relative Values for the <span class="property">text-align</span> Property</span></a>
      <li><a href="#resize"><span class="secno">2.4</span> <span class="content"> Flow-Relative Values for the <span class="property">resize</span> Property</span></a>
     </ol>
    <li><a href="#page"><span class="secno">3</span> <span class="content"> Flow-Relative Page Classifications</span></a>
    <li>
     <a href="#box"><span class="secno">4</span> <span class="content"> Flow-Relative Box Model Properties</span></a>
     <ol class="toc">
      <li><a href="#dimension-properties"><span class="secno">4.1</span> <span class="content"> Logical Height and Logical Width:
the <span class="property">block-size</span>/<span class="property">inline-size</span>, <span class="property">min-block-size</span>/<span class="property">min-inline-size</span>,
and <span class="property">max-block-size</span>/<span class="property">max-inline-size</span> properties</span></a>
      <li><a href="#margin-properties"><span class="secno">4.2</span> <span class="content"> Flow-relative Margins:
the <span class="property">margin-block-start</span>, <span class="property">margin-block-end</span>, <span class="property">margin-inline-start</span>, <span class="property">margin-inline-end</span> properties and <span class="property">margin-block</span> and <span class="property">margin-inline</span> shorthands</span></a>
      <li><a href="#position-properties"><span class="secno">4.3</span> <span class="content"> Flow-relative Offsets:
the <span class="property">inset-block-start</span>, <span class="property">inset-block-end</span>, <span class="property">inset-inline-start</span>, <span class="property">inset-inline-end</span> properties and <span class="property">inset-block</span>, <span class="property">inset-inline</span>, and <span class="property">inset</span> shorthands</span></a>
      <li><a href="#padding-properties"><span class="secno">4.4</span> <span class="content"> Flow-relative Padding:
the <span class="property">padding-block-start</span>, <span class="property">padding-block-end</span>, <span class="property">padding-inline-start</span>, <span class="property">padding-inline-end</span> properties and <span class="property">padding-block</span> and <span class="property">padding-inline</span> shorthands</span></a>
      <li>
       <a href="#border-properties"><span class="secno">4.5</span> <span class="content"> Flow-relative Borders</span></a>
       <ol class="toc">
        <li><a href="#border-width"><span class="secno">4.5.1</span> <span class="content"> Flow-relative Border Widths:
the <span class="property">border-block-start-width</span>, <span class="property">border-block-end-width</span>, <span class="property">border-inline-start-width</span>, <span class="property">border-inline-end-width</span> properties and <span class="property">border-block-width</span> and <span class="property">border-inline-width</span> shorthands</span></a>
        <li><a href="#border-style"><span class="secno">4.5.2</span> <span class="content"> Flow-relative Border Styles:
the <span class="property">border-block-start-style</span>, <span class="property">border-block-end-style</span>, <span class="property">border-inline-start-style</span>, <span class="property">border-inline-end-style</span> properties and <span class="property">border-block-style</span> and <span class="property">border-inline-style</span> shorthands</span></a>
        <li><a href="#border-color"><span class="secno">4.5.3</span> <span class="content"> Flow-relative Border Colors:
the <span class="property">border-block-start-color</span>, <span class="property">border-block-end-color</span>, <span class="property">border-inline-start-color</span>, <span class="property">border-inline-end-color</span> properties and <span class="property">border-block-color</span> and <span class="property">border-inline-color</span> shorthands</span></a>
        <li><a href="#border-shorthands"><span class="secno">4.5.4</span> <span class="content"> Flow-relative Border Shorthands:
the <span class="property">border-block-start</span>, <span class="property">border-block-end</span>, <span class="property">border-inline-start</span>, <span class="property">border-inline-end</span> properties and <span class="property">border-block</span> and <span class="property">border-inline</span> shorthands</span></a>
       </ol>
      <li><a href="#border-radius-properties"><span class="secno">4.6</span> <span class="content"> Flow-relative Corner Rounding:
the <span class="property">border-start-start-radius</span>, <span class="property">border-start-end-radius</span>, <span class="property">border-end-start-radius</span>, <span class="property">border-end-end-radius</span> properties</span></a>
      <li><a href="#logical-shorthand-keyword"><span class="secno">4.7</span> <span class="content"> Four-Directional Shorthand Properties: the <span class="property">margin</span>, <span class="property">padding</span>, <span class="property">border-width</span>, <span class="property">border-style</span>, and <span class="property">border-color</span> shorthands</span></a>
     </ol>
    <li><a href="#acknowledgements"><span class="secno">5</span> <span class="content">Acknowledgements</span></a>
    <li><a href="#changes"><span class="secno">6</span> <span class="content"> Changes</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p class="note" role="note"><span>Note:</span> See <a data-link-type="biblio" href="#biblio-css-writing-modes-4">[css-writing-modes-4]</a> for a proper introduction to writing modes;
  this module assumes familiarity with its terminology.</p>
   <p>Because different writing systems are written in different directions,
  a variety of <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing modes</a> exist:
  left to right, top to bottom;
  right to left, top to bottom;
  bottom to top, right to left;
  etc.
  logical concepts like the “start” of a page or line
  map differently to physical concepts like the “top” of a line or “left edge” of a paragraph.
  Some aspects of a layout are actually relative to the writing directions,
  and thus will vary when the page is translated to a different system;
  others are inherently relative to the page’s physical orientation.</p>
   <div class="example" id="example-6d6e205b">
    <a class="self-link" href="#example-6d6e205b"></a> For example,
    lists, headings, and paragraphs are typically left-aligned in English;
    but actually they are start-aligned, because in Arabic the same constructs are right-aligned,
    and a multilingual document will need to accommodate both writing systems accordingly. 
    <p>The following code examplify how using logical syntax can help you write code
        that works across different writing systems:</p>
    <figure>
      <img height="109" src="./images/example01.png" width="300"> 
     <figcaption>Rendering of the below code in a compatible browser</figcaption>
    </figure>
<pre class="highlight"><c- p>&lt;</c-><c- f>blockquote</c-> <c- e>dir</c-><c- o>=</c-><c- s>"auto"</c-><c- p>></c->Quotation in English<c- p>&lt;/</c-><c- f>blockquote</c-><c- p>></c->
<c- p>&lt;</c-><c- f>blockquote</c-> <c- e>dir</c-><c- o>=</c-><c- s>"auto"</c-><c- p>></c->اقتباس في العربية<c- p>&lt;/</c-><c- f>blockquote</c-><c- p>></c->
</pre>
<pre class="highlight"><c- f>blockquote </c-><c- p>{</c->
    <c- k>text-align</c-><c- p>:</c-> start<c- p>;</c-> <c- c>/* left in latin, right in arabic */</c->
    <c- k>margin-inline-start</c-><c- p>:</c-> <c- m>0</c-><c- l>px</c-><c- p>;</c-> <c- c>/* margin-left in latin, margin-right in arabic */</c->
    <c- k>border-inline-start</c-><c- p>:</c-> <c- m>5</c-><c- l>px</c-> solid gray<c- p>;</c-> <c- c>/* border-left in latin, border-right in arabic */</c->
    <c- k>padding-inline-start</c-><c- p>:</c-> <c- m>5</c-><c- l>px</c-><c- p>;</c-> <c- c>/* padding-left in latin, padding-right in arabic */</c->
<c- p>}</c->
</pre>
    <p>Documents might need both logical and physical properties. For instance
      the drop shadows on buttons on a page must remain consistent throughout,
      so their offset will be chosen based on visual considerations and physical directions,
      and not vary by writing system.</p>
   </div>
   <p>Since CSS was originally designed with only physical coordinates in its controls,
  this module introduces text-flow–relative equivalents
  so that declarations in a CSS style sheet can be expressed
  in <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative">flow-relative</a> terms.
  It defines the mapping and cascading of equivalent properties,
  some new properties and values equivalent to those in CSS2.1,
  and the principles used to derive their syntaxes.
  Future CSS specifications are expected to incorporate both sets of coordinates
  in their property and value definitions,
  so this module will not track the introduction of <span id="ref-for-flow-relative①">flow-relative</span> variants
  of newer CSS features.</p>
   <p><a href="http://www.w3.org/TR/css-writing-modes/">CSS Writing Modes</a>’ <a href="https://www.w3.org/TR/css-writing-modes-3/#abstract-box">Abstract Box Terminology</a> section
  defines how to map between flow-relative and physical terms.
  This mapping,
  which depends on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value">used values</a> of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a>,
  controls the interpretation of flow-relative keywords and properties.</p>
   <div id="mapping-diagram">
    <figure>
      <img src="diagrams/sizing-ltr-tb.svg"> 
     <figcaption> Correspondence of physical and flow-relative terms in typical English text layout </figcaption>
    </figure>
    <figure>
      <img src="diagrams/sizing-ttb-rl.svg"> 
     <figcaption> Correspondence of physical and flow-relative terms in typical Chinese text layout </figcaption>
    </figure>
   </div>
   <p class="note" role="note"><span>Note:</span> Due to its interaction with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation">text-orientation: upright</a>,
  the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value①">used</a> <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a> depends on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">computed values</a> of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①">writing-mode</a> and <span class="property" id="ref-for-propdef-text-orientation①">text-orientation</span>.</p>
   <div class="issue" id="issue-3d880eb1">
    <a class="self-link" href="#issue-3d880eb1"></a> <strong>Things That Are Unstable</strong> Since implementation of parts of this module is effectively required
  for shipping an implementation of <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes</a> on the Web
  (in order to correctly implement the default HTML styles),
  the CSSWG resolved that
  the requisite features in <a href="#directional-keywords">§ 2 Flow-Relative Values: block-start, block-end, inline-start, inline-end</a> and <a href="#box">§ 4 Flow-Relative Box Model Properties</a> are approved for shipping.
  (See <a href="https://lists.w3.org/Archives/Public/www-style/2017Dec/0043.html">FPWD announcement</a> for additional background.) 
    <p>However, there are a few significant open issues:</p>
    <ul>
     <li>The <span class="css">logical</span> keyword on shorthands,
        because the name of the keyword may change or it may be replaced by some other syntactic marker.
        (This feature will be deferred from this level for further development
        if there is no clearly satisfactory mechanism proposed,
        see <a href="https://github.com/w3c/csswg-drafts/issues/1282">Issue 1282</a>.) 
     <li>Whether flow-relative longhands inherit from their namesake on the parent,
        or are mapped to a physical property and inherit from that property.
        (See <a href="https://github.com/w3c/csswg-drafts/issues/3029">Issue 3029</a>.) 
     <li>Whether shorthands like <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin" id="ref-for-propdef-margin">margin</a> expand to both sets of longhands,
        or only the ones that were set.
        (See <a href="https://github.com/w3c/csswg-drafts/issues/3030">Issue 3030</a>.) 
    </ul>
     Comments, suggestions, and use cases are welcome on these issues.
  Please file them in GitHub, tweet them to @csswg, or send them to www-style@w3.org. 
   </div>
   <h2 class="heading settled" data-level="2" id="directional-keywords"><span class="secno">2. </span><span class="content"> Flow-Relative Values: <span class="css">block-start</span>, <span class="css">block-end</span>, <span class="css">inline-start</span>, <span class="css">inline-end</span></span><a class="self-link" href="#directional-keywords"></a></h2>
   <p>Properties that accept physical directional keyword values
  (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top">top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom">bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a>, or <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a>) are redefined
  to also accept the appropriate <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative②">flow-relative</a> directional keywords.
  In such cases,
  the flow-relative values can be used in place of the corresponding physical values.
  For properties that take multiple keywords,
  combinations of flow-relative and physical values are not allowed
  (unless otherwise specified in a future specification).</p>
   <p>Properties can be either 1-dimensional or 2-dimensional.
  When contextually constrained to one dimension,
  the flow-relative keywords are abbreviated.</p>
   <h3 class="heading settled" data-level="2.1" id="caption-side"><span class="secno">2.1. </span><span class="content"> Logical Values for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-caption-side" id="ref-for-propdef-caption-side">caption-side</a> Property</span><a class="self-link" href="#caption-side"></a></h3>
   <table class="def propdef partial" data-link-for-hint="caption-side">
    <tbody>
     <tr>
      <th>Name:
      <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css2/tables.html#propdef-caption-side" id="ref-for-propdef-caption-side①">caption-side</a>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">New values:</a>
      <td class="prod">inline-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> inline-end 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword 
   </table>
   <p>These two values are added only for implementations that support <span class="css">left</span> and <span class="css">right</span> values for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-caption-side" id="ref-for-propdef-caption-side②">caption-side</a>.
  The <span class="css">left</span> and <span class="css">right</span> values themselves
  are defined to be <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-relative" id="ref-for-line-relative">line-relative</a>.</p>
   <p>The existing <span class="css">top</span> and <span class="css">bottom</span> values are idiosyncratically redefined
  as assigning to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start">block-start</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-end" id="ref-for-block-end">block-end</a> sides of the table, respectively.</p>
   <p>The mapping on this property uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①">writing mode</a> of the caption’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a> (that is, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box">table wrapper box</a>).</p>
   <h3 class="heading settled" data-level="2.2" id="float-clear"><span class="secno">2.2. </span><span class="content"> Flow-Relative Values for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float">float</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-clear" id="ref-for-propdef-clear">clear</a> Properties</span><a class="self-link" href="#float-clear"></a></h3>
   <table class="def propdef partial" data-link-for-hint="float">
    <tbody>
     <tr>
      <th>Name:
      <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float①">float</a>, <a class="css" data-link-type="property" href="https://drafts.csswg.org/css2/visuren.html#propdef-clear" id="ref-for-propdef-clear①">clear</a>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">New values:</a>
      <td class="prod">inline-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> inline-end 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword 
   </table>
   <p>The mapping on these properties uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode②">writing mode</a> of the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①">containing block</a>.</p>
   <p class="note" role="note"><span>Note:</span> These properties are 1-dimensional in CSS2,
  but are planned to be expanded to two dimensions,
  and therefore are given unabbreviated <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative③">flow-relative</a> keywords.</p>
   <h3 class="heading settled" data-level="2.3" id="text-align"><span class="secno">2.3. </span><span class="content"> Flow-Relative Values for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align</a> Property</span><a class="self-link" href="#text-align"></a></h3>
   <table class="def propdef partial" data-link-for-hint="text-align">
    <tbody>
     <tr>
      <th>Name:
      <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align①">text-align</a>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">New values:</a>
      <td class="prod">start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> end 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword 
   </table>
   <p>These values are normatively defined in <a data-link-type="biblio" href="#biblio-css-text-3">[css-text-3]</a>.</p>
   <h3 class="heading settled" data-level="2.4" id="resize"><span class="secno">2.4. </span><span class="content"> Flow-Relative Values for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-4/#propdef-resize" id="ref-for-propdef-resize">resize</a> Property</span><a class="self-link" href="#resize"></a></h3>
   <table class="def propdef partial" data-link-for-hint="resize">
    <tbody>
     <tr>
      <th>Name:
      <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-ui-4/#propdef-resize" id="ref-for-propdef-resize①">resize</a>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">New values:</a>
      <td class="prod">block <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> inline 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword 
   </table>
   <h2 class="heading settled" data-level="3" id="page"><span class="secno">3. </span><span class="content"> Flow-Relative Page Classifications</span><a class="self-link" href="#page"></a></h2>
   <p>In CSS, all pages are classified by user agents as either left pages or right pages. <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> Which page is first in a spread, however,
  depends on whether the page progression is left-to-right or right-to-left.</p>
   <p>To allow control of page breaking to the page
  that is on the earlier or later side of a spread,
  rather than to the left or right side of a spread,
  this module introduces the following additional keywords
  for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/page.html#propdef-page-break-after" id="ref-for-propdef-page-break-after">page-break-after</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/page.html#propdef-page-break-before" id="ref-for-propdef-page-break-before">page-break-before</a> properties <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="logical-page" data-dfn-type="value" data-export id="valdef-logical-page-recto">recto<a class="self-link" href="#valdef-logical-page-recto"></a></dfn> 
    <dd> Equivalent to <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right①">right</a> in left-to-right page progressions
        and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left①">left</a> in right-to-left page progressions. 
    <dt><dfn class="css" data-dfn-for="logical-page" data-dfn-type="value" data-export id="valdef-logical-page-verso">verso<a class="self-link" href="#valdef-logical-page-verso"></a></dfn> 
    <dd> Equivalent to <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left②">left</a> in left-to-right page progressions
        and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right②">right</a> in right-to-left page progressions. 
   </dl>
   <p>These values are computed as specified
  and are further defined in <a data-link-type="biblio" href="#biblio-css-break-3">[css-break-3]</a>.</p>
   <p>Although authors typically place page numbers using physical placements,
  the contents of headers often follows conventions depending
  on which page in the spread is earlier.
  Therefore the following flow-relative <a href="https://www.w3.org/TR/CSS21/page.html#page-selectors">page selectors</a> are also added to support flow-relative page selection:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="logical-page-selector" data-dfn-type="value" data-export id="valdef-logical-page-selector-recto">:recto<a class="self-link" href="#valdef-logical-page-selector-recto"></a></dfn> 
    <dd> Equivalent to ':right' in left-to-right page progressions
        and ':left' in right-to-left page progressions. 
    <dt><dfn class="css" data-dfn-for="logical-page-selector" data-dfn-type="value" data-export id="valdef-logical-page-selector-verso">:verso<a class="self-link" href="#valdef-logical-page-selector-verso"></a></dfn> 
    <dd> Equivalent to ':left' in left-to-right page progressions
        and ':right' in right-to-left page progressions. 
   </dl>
   <p>The flow-relative page selectors have specificity equal to
  the ':left' and ':right' page selectors.</p>
   <h2 class="heading settled" data-level="4" id="box"><span class="secno">4. </span><span class="content"> Flow-Relative Box Model Properties</span><a class="self-link" href="#box"></a></h2>
   <p>This specification introduces new CSS properties
  that are <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative④">flow-relative</a> equivalents
  of <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical">physical</a> box model properties.
  Each set of related flow-relative longhand properties
  and their parallel physical properties
  form a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="logical-property-group">logical property group</dfn>.
  For example, the <a class="property" data-link-type="propdesc">padding-*</a> properties
  form a single <a data-link-type="dfn" href="#logical-property-group" id="ref-for-logical-property-group">logical property group</a>,
  the <span class="property">margin-*</span> properties
  form a separate <span id="ref-for-logical-property-group①">logical property group</span>,
  etc.
  The type of directional or axis mapping
  (<span id="ref-for-flow-relative⑤">flow-relative</span> or <span id="ref-for-physical①">physical</span>)
  is called the property’s <dfn data-dfn-type="dfn" data-export id="mapping-logic">mapping logic<a class="self-link" href="#mapping-logic"></a></dfn>.</p>
   <p class="note" role="note"><span>Note:</span> Each longhand property is in at most one <a data-link-type="dfn" href="#logical-property-group" id="ref-for-logical-property-group②">logical property group</a>.</p>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#specified-value" id="ref-for-specified-value">specified values</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative⑥">flow-relative</a> properties
  are distinct from
  the specified values of the parallel physical properties,
  but the flow-relative and physical properties share computed values.
  Which pairs of properties share computed values
  depends on the element’s computed values of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode②">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction②">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation②">text-orientation</a>.</p>
   <p class="note" role="note"><span>Note:</span> Depending on the element’s own <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode③">writing mode</a> for mapping every <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative⑦">flow-relative</a> property
  to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical②">physical</a> equivalent
  simplifies the cascading calculations
  and gives a straightforward model for authors to reason about.
  However, it is problematic in many cases,
  see for example <a href="https://www.w3.org/mid/20161108202634.GA7235@mail.internode.on.net">this discussion</a>.
  Authors may need to use nested elements
  to get the correct mapping behavior
  when changing an element’s <span id="ref-for-writing-mode④">writing mode</span> from its parent.</p>
   <p>A computed value that has flow-relative and physical properties as input
  is determined by applying the CSS cascade to declarations of both.
  Overriding is not determined by whether a declaration is flow-relative or physical,
  but only by the rules of the CSS cascade <a data-link-type="biblio" href="#biblio-css-cascade-3">[css-cascade-3]</a>.</p>
   <p class="note" role="note"> Note that this requires implementations to maintain
    relative order of declarations within a CSS declaration block,
    which was not previously required for CSS cascading. </p>
   <div class="example" id="example-0ead529c">
    <a class="self-link" href="#example-0ead529c"></a> For example, given the following rule: 
<pre class="lang-css highlight"><c- f>p </c-><c- p>{</c->
  <c- k>margin-inline-start</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-><c- p>;</c->
  <c- k>margin-left</c-><c- p>:</c-> <c- m>2</c-><c- l>px</c-><c- p>;</c->
  <c- k>margin-inline-end</c-><c- p>:</c-> <c- m>3</c-><c- l>px</c-><c- p>;</c->
<c- p>}</c->
</pre>
    <p>In a paragraph with computed <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode③">writing-mode</a> being <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb">horizontal-tb</a> and computed <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction③">direction</a> being <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr">ltr</a>,
    the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left">margin-left</a> is <span class="css">2px</span>,
    since for that <span class="property" id="ref-for-propdef-writing-mode④">writing-mode</span> and <span class="property" id="ref-for-propdef-direction④">direction</span>, <a class="property" data-link-type="propdesc" href="#propdef-margin-inline-start" id="ref-for-propdef-margin-inline-start">margin-inline-start</a> and <span class="property" id="ref-for-propdef-margin-left①">margin-left</span> share a computed value,
    and the declaration of <span class="property" id="ref-for-propdef-margin-left②">margin-left</span> is after the declaration of <span class="property" id="ref-for-propdef-margin-inline-start①">margin-inline-start</span>.
    However, if the computed <span class="property" id="ref-for-propdef-direction⑤">direction</span> were instead <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl">rtl</a>,
    the computed value of <span class="property" id="ref-for-propdef-margin-left③">margin-left</span> is <span class="css">3px</span>,
    since <a class="property" data-link-type="propdesc" href="#propdef-margin-inline-end" id="ref-for-propdef-margin-inline-end">margin-inline-end</a> and <span class="property" id="ref-for-propdef-margin-left④">margin-left</span> share a computed value,
    and the declaration of <span class="property" id="ref-for-propdef-margin-inline-end①">margin-inline-end</span> is after the declaration of <span class="property" id="ref-for-propdef-margin-left⑤">margin-left</span>.</p>
   </div>
   <p><a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> APIs that return computed values
  (such as <code>getComputedStyle()</code>)
  must return the same value for equivalent pairs of such properties.</p>
   <p class="issue" id="issue-8d273300"><a class="self-link" href="#issue-8d273300"></a> There are some open questions on
  the <a href="https://github.com/w3c/csswg-drafts/issues/3029">order of inheritance vs mapping in flow-relative properties</a> and on the <a href="https://github.com/w3c/csswg-drafts/issues/3030">interaction of shorthands and logical properties</a>.</p>
   <h3 class="heading settled" data-level="4.1" id="dimension-properties"><span class="secno">4.1. </span><span class="content"> Logical Height and Logical Width:
the <a class="property" data-link-type="propdesc" href="#propdef-block-size" id="ref-for-propdef-block-size">block-size</a>/<a class="property" data-link-type="propdesc" href="#propdef-inline-size" id="ref-for-propdef-inline-size">inline-size</a>, <a class="property" data-link-type="propdesc" href="#propdef-min-block-size" id="ref-for-propdef-min-block-size">min-block-size</a>/<a class="property" data-link-type="propdesc" href="#propdef-min-inline-size" id="ref-for-propdef-min-inline-size">min-inline-size</a>,
and <a class="property" data-link-type="propdesc" href="#propdef-max-block-size" id="ref-for-propdef-max-block-size">max-block-size</a>/<a class="property" data-link-type="propdesc" href="#propdef-max-inline-size" id="ref-for-propdef-max-inline-size">max-inline-size</a> properties</span><a class="self-link" href="#dimension-properties"></a></h3>
   <table class="def propdef" data-link-for-hint="block-size">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-block-size">block-size</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inline-size">inline-size</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width">&lt;'width'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>Same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height">height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①">width</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>As for the corresponding physical property 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height①">height</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width②">width</a> 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height②">height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width③">width</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑤">writing-mode</a>.</p>
   <table class="def propdef" data-link-for-hint="min-block-size">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-min-block-size">min-block-size</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-min-inline-size">min-inline-size</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-width" id="ref-for-propdef-min-width">&lt;'min-width'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0 
     <tr>
      <th>Applies to:
      <td>same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height③">height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width④">width</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>As for the corresponding physical property 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-height" id="ref-for-propdef-min-height">min-height</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-width" id="ref-for-propdef-min-width①">min-width</a> 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-height" id="ref-for-propdef-min-height①">min-height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-width" id="ref-for-propdef-min-width②">min-width</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑥">writing-mode</a>.</p>
   <table class="def propdef" data-link-for-hint="max-block-size">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-max-block-size">max-block-size</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-max-inline-size">max-inline-size</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width" id="ref-for-propdef-max-width">&lt;'max-width'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td>same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height④">height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width⑤">width</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>As for the corresponding physical property 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height" id="ref-for-propdef-max-height">max-height</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width" id="ref-for-propdef-max-width①">max-width</a> 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height" id="ref-for-propdef-max-height①">max-height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width" id="ref-for-propdef-max-width②">max-width</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑦">writing-mode</a>.</p>
   <h3 class="heading settled" data-level="4.2" id="margin-properties"><span class="secno">4.2. </span><span class="content"> Flow-relative Margins:
the <a class="property" data-link-type="propdesc" href="#propdef-margin-block-start" id="ref-for-propdef-margin-block-start">margin-block-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-margin-block-end" id="ref-for-propdef-margin-block-end">margin-block-end</a>, <a class="property" data-link-type="propdesc" href="#propdef-margin-inline-start" id="ref-for-propdef-margin-inline-start②">margin-inline-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-margin-inline-end" id="ref-for-propdef-margin-inline-end②">margin-inline-end</a> properties and <a class="property" data-link-type="propdesc" href="#propdef-margin-block" id="ref-for-propdef-margin-block">margin-block</a> and <a class="property" data-link-type="propdesc" href="#propdef-margin-inline" id="ref-for-propdef-margin-inline">margin-inline</a> shorthands</span><a class="self-link" href="#margin-properties"></a></h3>
   <table class="def propdef" data-link-for-hint="margin-block-start">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-block-start">margin-block-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-block-end">margin-block-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-inline-start">margin-inline-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-inline-end">margin-inline-end</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top">&lt;'margin-top'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0 
     <tr>
      <th>Applies to:
      <td>Same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top①">margin-top</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>As for the corresponding physical property 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Same as corresponding <a class="property" data-link-type="propdesc">margin-*</a> properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top②">margin-top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom">margin-bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left⑥">margin-left</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑧">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑥">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation③">text-orientation</a>.</p>
   <table class="def propdef" data-link-for-hint="margin-block">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-block">margin-block</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-inline">margin-inline</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top③">&lt;'margin-top'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property">shorthand properties</a> set the <a class="property" data-link-type="propdesc" href="#propdef-margin-block-start" id="ref-for-propdef-margin-block-start①">margin-block-start</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-margin-block-end" id="ref-for-propdef-margin-block-end①">margin-block-end</a> and <a class="property" data-link-type="propdesc" href="#propdef-margin-inline-start" id="ref-for-propdef-margin-inline-start③">margin-inline-start</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-margin-inline-end" id="ref-for-propdef-margin-inline-end③">margin-inline-end</a>,
  respectively.
  The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#start" id="ref-for-start">start</a> edge style,
  and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#end" id="ref-for-end">end</a> edge style.
  If only one value is given, it applies to both the <span id="ref-for-start①">start</span> and <span id="ref-for-end①">end</span> edges.</p>
   <h3 class="heading settled" data-level="4.3" id="position-properties"><span class="secno">4.3. </span><span class="content"> Flow-relative Offsets:
the <a class="property" data-link-type="propdesc" href="#propdef-inset-block-start" id="ref-for-propdef-inset-block-start">inset-block-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-inset-block-end" id="ref-for-propdef-inset-block-end">inset-block-end</a>, <a class="property" data-link-type="propdesc" href="#propdef-inset-inline-start" id="ref-for-propdef-inset-inline-start">inset-inline-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-inset-inline-end" id="ref-for-propdef-inset-inline-end">inset-inline-end</a> properties and <a class="property" data-link-type="propdesc" href="#propdef-inset-block" id="ref-for-propdef-inset-block">inset-block</a>, <a class="property" data-link-type="propdesc" href="#propdef-inset-inline" id="ref-for-propdef-inset-inline">inset-inline</a>, and <a class="property" data-link-type="propdesc" href="#propdef-inset" id="ref-for-propdef-inset">inset</a> shorthands</span><a class="self-link" href="#position-properties"></a></h3>
   <p>The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top①">top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left③">left</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom①">bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right③">right</a> physical properites,
  their <a class="property" data-link-type="propdesc" href="#propdef-inset-block-start" id="ref-for-propdef-inset-block-start①">inset-block-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-inset-block-end" id="ref-for-propdef-inset-block-end①">inset-block-end</a>, <a class="property" data-link-type="propdesc" href="#propdef-inset-inline-start" id="ref-for-propdef-inset-inline-start①">inset-inline-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-inset-inline-end" id="ref-for-propdef-inset-inline-end①">inset-inline-end</a> flow-relative correspondants,
  and the <a class="property" data-link-type="propdesc" href="#propdef-inset-block" id="ref-for-propdef-inset-block①">inset-block</a>, <a class="property" data-link-type="propdesc" href="#propdef-inset-inline" id="ref-for-propdef-inset-inline①">inset-inline</a>, and <a class="property" data-link-type="propdesc" href="#propdef-inset" id="ref-for-propdef-inset①">inset</a> shorthands,
  are colectively known as the <dfn data-dfn-type="dfn" data-export id="inset-properties">inset properties<a class="self-link" href="#inset-properties"></a></dfn>.</p>
   <table class="def propdef" data-link-for-hint="inset-block-start">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-block-start">inset-block-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-block-end">inset-block-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-inline-start">inset-inline-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-inline-end">inset-inline-end</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top②">&lt;'top'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>positioned elements 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>As for the corresponding physical property 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Same as corresponding <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top③">top</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right④">right</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom②">bottom</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left④">left</a> properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top④">top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom③">bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left⑤">left</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right⑤">right</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑨">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑦">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation④">text-orientation</a>.</p>
   <table class="def propdef" data-link-for-hint="inset-block">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-block">inset-block</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-inline">inset-inline</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top⑤">&lt;'top'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range①">{1,2}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property①">shorthand properties</a> set the <a class="property" data-link-type="propdesc" href="#propdef-inset-block-start" id="ref-for-propdef-inset-block-start②">inset-block-start</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-inset-block-end" id="ref-for-propdef-inset-block-end②">inset-block-end</a> and <a class="property" data-link-type="propdesc" href="#propdef-inset-inline-start" id="ref-for-propdef-inset-inline-start②">inset-inline-start</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-inset-inline-end" id="ref-for-propdef-inset-inline-end②">inset-inline-end</a>,
  respectively.
  The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#start" id="ref-for-start②">start</a> edge style,
  and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#end" id="ref-for-end②">end</a> edge style.
  If only one value is given, it applies to both the <span id="ref-for-start③">start</span> and <span id="ref-for-end③">end</span> edges.</p>
   <table class="def propdef" data-link-for-hint="inset">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset">inset</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top⑥">&lt;'top'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range②">{1,4}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>This <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property②">shorthand property</a> sets the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top⑦">top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right⑥">right</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom④">bottom</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left⑥">left</a> properties.
  Values are assigned to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#longhand" id="ref-for-longhand">sub-properties</a> as for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin" id="ref-for-propdef-margin①">margin</a>.</p>
   <h3 class="heading settled" data-level="4.4" id="padding-properties"><span class="secno">4.4. </span><span class="content"> Flow-relative Padding:
the <a class="property" data-link-type="propdesc" href="#propdef-padding-block-start" id="ref-for-propdef-padding-block-start">padding-block-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-padding-block-end" id="ref-for-propdef-padding-block-end">padding-block-end</a>, <a class="property" data-link-type="propdesc" href="#propdef-padding-inline-start" id="ref-for-propdef-padding-inline-start">padding-inline-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-padding-inline-end" id="ref-for-propdef-padding-inline-end">padding-inline-end</a> properties and <a class="property" data-link-type="propdesc" href="#propdef-padding-block" id="ref-for-propdef-padding-block">padding-block</a> and <a class="property" data-link-type="propdesc" href="#propdef-padding-inline" id="ref-for-propdef-padding-inline">padding-inline</a> shorthands</span><a class="self-link" href="#padding-properties"></a></h3>
   <table class="def propdef" data-link-for-hint="padding-block-start">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-block-start">padding-block-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-block-end">padding-block-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-inline-start">padding-inline-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-inline-end">padding-inline-end</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-top" id="ref-for-propdef-padding-top">&lt;'padding-top'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>As for the corresponding physical property 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Same as corresponding <a class="property" data-link-type="propdesc">padding-*</a> properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-top" id="ref-for-propdef-padding-top①">padding-top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-bottom" id="ref-for-propdef-padding-bottom">padding-bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-left" id="ref-for-propdef-padding-left">padding-left</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-right" id="ref-for-propdef-padding-right">padding-right</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①⓪">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑧">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation⑤">text-orientation</a>.</p>
   <table class="def propdef" data-link-for-hint="padding-block">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-block">padding-block</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-inline">padding-inline</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-top" id="ref-for-propdef-padding-top②">&lt;'padding-top'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range③">{1,2}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property③">shorthand properties</a> set the <a class="property" data-link-type="propdesc" href="#propdef-padding-block-start" id="ref-for-propdef-padding-block-start①">padding-block-start</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-padding-block-end" id="ref-for-propdef-padding-block-end①">padding-block-end</a> and <a class="property" data-link-type="propdesc" href="#propdef-padding-inline-start" id="ref-for-propdef-padding-inline-start①">padding-inline-start</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-padding-inline-end" id="ref-for-propdef-padding-inline-end①">padding-inline-end</a>,
  respectively.
  The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#start" id="ref-for-start④">start</a> edge style,
  and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#end" id="ref-for-end④">end</a> edge style.
  If only one value is given, it applies to both the <span id="ref-for-start⑤">start</span> and <span id="ref-for-end⑤">end</span> edges.</p>
   <h3 class="heading settled" data-level="4.5" id="border-properties"><span class="secno">4.5. </span><span class="content"> Flow-relative Borders</span><a class="self-link" href="#border-properties"></a></h3>
   <h4 class="heading settled" data-level="4.5.1" id="border-width"><span class="secno">4.5.1. </span><span class="content"> Flow-relative Border Widths:
the <a class="property" data-link-type="propdesc" href="#propdef-border-block-start-width" id="ref-for-propdef-border-block-start-width">border-block-start-width</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-block-end-width" id="ref-for-propdef-border-block-end-width">border-block-end-width</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-inline-start-width" id="ref-for-propdef-border-inline-start-width">border-inline-start-width</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-inline-end-width" id="ref-for-propdef-border-inline-end-width">border-inline-end-width</a> properties and <a class="property" data-link-type="propdesc" href="#propdef-border-block-width" id="ref-for-propdef-border-block-width">border-block-width</a> and <a class="property" data-link-type="propdesc" href="#propdef-border-inline-width" id="ref-for-propdef-border-inline-width">border-inline-width</a> shorthands</span><a class="self-link" href="#border-width"></a></h4>
   <table class="def propdef" data-link-for-hint="border-block-start-width">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-start-width">border-block-start-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-end-width">border-block-end-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-start-width">border-inline-start-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-end-width">border-inline-end-width</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">&lt;'border-top-width'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>medium 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Same as corresponding <a class="property" data-link-type="propdesc">border-*-width</a> properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width①">border-top-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①①">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑨">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation⑥">text-orientation</a>.</p>
   <table class="def propdef" data-link-for-hint="border-block-width">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-width">border-block-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-width">border-inline-width</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width②">&lt;'border-top-width'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range④">{1,2}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property④">shorthand properties</a> set the <a class="property" data-link-type="propdesc" href="#propdef-border-block-start-width" id="ref-for-propdef-border-block-start-width①">border-block-start-width</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-border-block-end-width" id="ref-for-propdef-border-block-end-width①">border-block-end-width</a> and <a class="property" data-link-type="propdesc" href="#propdef-border-inline-start-width" id="ref-for-propdef-border-inline-start-width①">border-inline-start-width</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-border-inline-end-width" id="ref-for-propdef-border-inline-end-width①">border-inline-end-width</a>,
  respectively.
  The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#start" id="ref-for-start⑥">start</a> edge width,
  and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#end" id="ref-for-end⑥">end</a> edge width.
  If only one value is given, it applies to both the <span id="ref-for-start⑦">start</span> and <span id="ref-for-end⑦">end</span> edges.</p>
   <h4 class="heading settled" data-level="4.5.2" id="border-style"><span class="secno">4.5.2. </span><span class="content"> Flow-relative Border Styles:
the <a class="property" data-link-type="propdesc" href="#propdef-border-block-start-style" id="ref-for-propdef-border-block-start-style">border-block-start-style</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-block-end-style" id="ref-for-propdef-border-block-end-style">border-block-end-style</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-inline-start-style" id="ref-for-propdef-border-inline-start-style">border-inline-start-style</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-inline-end-style" id="ref-for-propdef-border-inline-end-style">border-inline-end-style</a> properties and <a class="property" data-link-type="propdesc" href="#propdef-border-block-style" id="ref-for-propdef-border-block-style">border-block-style</a> and <a class="property" data-link-type="propdesc" href="#propdef-border-inline-style" id="ref-for-propdef-border-inline-style">border-inline-style</a> shorthands</span><a class="self-link" href="#border-style"></a></h4>
   <table class="def propdef" data-link-for-hint="border-block-start-style">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-start-style">border-block-start-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-end-style">border-block-end-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-start-style">border-inline-start-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-end-style">border-inline-end-style</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style" id="ref-for-propdef-border-top-style">&lt;'border-top-style'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Same as corresponding <a class="property" data-link-type="propdesc">border-*-style</a> properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style" id="ref-for-propdef-border-top-style①">border-top-style</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style" id="ref-for-propdef-border-bottom-style">border-bottom-style</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style" id="ref-for-propdef-border-left-style">border-left-style</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style" id="ref-for-propdef-border-right-style">border-right-style</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①②">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①⓪">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation⑦">text-orientation</a>.</p>
   <table class="def propdef" data-link-for-hint="border-block-style">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-style">border-block-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-style">border-inline-style</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style" id="ref-for-propdef-border-top-style②">&lt;'border-top-style'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑤">{1,2}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property⑤">shorthand properties</a> set the <a class="property" data-link-type="propdesc" href="#propdef-border-block-start-style" id="ref-for-propdef-border-block-start-style①">border-block-start-style</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-border-block-end-style" id="ref-for-propdef-border-block-end-style①">border-block-end-style</a> and <a class="property" data-link-type="propdesc" href="#propdef-border-inline-start-style" id="ref-for-propdef-border-inline-start-style①">border-inline-start-style</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-border-inline-end-style" id="ref-for-propdef-border-inline-end-style①">border-inline-end-style</a>,
  respectively.
  The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#start" id="ref-for-start⑧">start</a> edge style,
  and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#end" id="ref-for-end⑧">end</a> edge style.
  If only one value is given, it applies to both the <span id="ref-for-start⑨">start</span> and <span id="ref-for-end⑨">end</span> edges.</p>
   <h4 class="heading settled" data-level="4.5.3" id="border-color"><span class="secno">4.5.3. </span><span class="content"> Flow-relative Border Colors:
the <a class="property" data-link-type="propdesc" href="#propdef-border-block-start-color" id="ref-for-propdef-border-block-start-color">border-block-start-color</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-block-end-color" id="ref-for-propdef-border-block-end-color">border-block-end-color</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-inline-start-color" id="ref-for-propdef-border-inline-start-color">border-inline-start-color</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-inline-end-color" id="ref-for-propdef-border-inline-end-color">border-inline-end-color</a> properties and <a class="property" data-link-type="propdesc" href="#propdef-border-block-color" id="ref-for-propdef-border-block-color">border-block-color</a> and <a class="property" data-link-type="propdesc" href="#propdef-border-inline-color" id="ref-for-propdef-border-inline-color">border-inline-color</a> shorthands</span><a class="self-link" href="#border-color"></a></h4>
   <table class="def propdef" data-link-for-hint="border-block-start-color">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-start-color">border-block-start-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-end-color">border-block-end-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-start-color">border-inline-start-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-end-color">border-inline-end-color</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color">&lt;'border-top-color'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>currentcolor 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Same as corresponding <a class="property" data-link-type="propdesc">border-*-color</a> properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color①">border-top-color</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color" id="ref-for-propdef-border-bottom-color">border-bottom-color</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color" id="ref-for-propdef-border-left-color">border-left-color</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color" id="ref-for-propdef-border-right-color">border-right-color</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①③">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①①">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation⑧">text-orientation</a>.</p>
   <table class="def propdef" data-link-for-hint="border-block-color">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-color">border-block-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-color">border-inline-color</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color②">&lt;'border-top-color'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑥">{1,2}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property⑥">shorthand properties</a> set the <a class="property" data-link-type="propdesc" href="#propdef-border-block-start-color" id="ref-for-propdef-border-block-start-color①">border-block-start-color</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-border-block-end-color" id="ref-for-propdef-border-block-end-color①">border-block-end-color</a> and <a class="property" data-link-type="propdesc" href="#propdef-border-inline-start-color" id="ref-for-propdef-border-inline-start-color①">border-inline-start-color</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-border-inline-end-color" id="ref-for-propdef-border-inline-end-color①">border-inline-end-color</a>,
  respectively.
  The first value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#start" id="ref-for-start①⓪">start</a> edge style,
  and the second value represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#end" id="ref-for-end①⓪">end</a> edge style.
  If only one value is given, it applies to both the <span id="ref-for-start①①">start</span> and <span id="ref-for-end①①">end</span> edges.</p>
   <h4 class="heading settled" data-level="4.5.4" id="border-shorthands"><span class="secno">4.5.4. </span><span class="content"> Flow-relative Border Shorthands:
the <a class="property" data-link-type="propdesc" href="#propdef-border-block-start" id="ref-for-propdef-border-block-start">border-block-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-block-end" id="ref-for-propdef-border-block-end">border-block-end</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-inline-start" id="ref-for-propdef-border-inline-start">border-inline-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-inline-end" id="ref-for-propdef-border-inline-end">border-inline-end</a> properties and <a class="property" data-link-type="propdesc" href="#propdef-border-block" id="ref-for-propdef-border-block">border-block</a> and <a class="property" data-link-type="propdesc" href="#propdef-border-inline" id="ref-for-propdef-border-inline">border-inline</a> shorthands</span><a class="self-link" href="#border-shorthands"></a></h4>
   <table class="def propdef" data-link-for-hint="border-block-start">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-start">border-block-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block-end">border-block-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-start">border-inline-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline-end">border-inline-end</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width③">&lt;'border-top-width'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style" id="ref-for-propdef-border-top-style③">&lt;'border-top-style'></a> <span id="ref-for-comb-any①">||</span> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top" id="ref-for-propdef-border-top">border-top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom" id="ref-for-propdef-border-bottom">border-bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left" id="ref-for-propdef-border-left">border-left</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right" id="ref-for-propdef-border-right">border-right</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①④">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①②">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation⑨">text-orientation</a>.</p>
   <table class="def propdef" data-link-for-hint="border-block">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-block">border-block</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-inline">border-inline</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-border-block-start" id="ref-for-propdef-border-block-start①">&lt;'border-block-start'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>These two <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property⑦">shorthand properties</a> set the <a class="property" data-link-type="propdesc" href="#propdef-border-block-start" id="ref-for-propdef-border-block-start②">border-block-start</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-border-block-end" id="ref-for-propdef-border-block-end①">border-block-end</a> and <a class="property" data-link-type="propdesc" href="#propdef-border-inline-start" id="ref-for-propdef-border-inline-start①">border-inline-start</a> &amp; <a class="property" data-link-type="propdesc" href="#propdef-border-inline-end" id="ref-for-propdef-border-inline-end①">border-inline-end</a>,
  respectively.</p>
   <h3 class="heading settled" data-level="4.6" id="border-radius-properties"><span class="secno">4.6. </span><span class="content"> Flow-relative Corner Rounding:
the <a class="property" data-link-type="propdesc" href="#propdef-border-start-start-radius" id="ref-for-propdef-border-start-start-radius">border-start-start-radius</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-start-end-radius" id="ref-for-propdef-border-start-end-radius">border-start-end-radius</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-end-start-radius" id="ref-for-propdef-border-end-start-radius">border-end-start-radius</a>, <a class="property" data-link-type="propdesc" href="#propdef-border-end-end-radius" id="ref-for-propdef-border-end-end-radius">border-end-end-radius</a> properties</span><a class="self-link" href="#border-radius-properties"></a></h3>
   <table class="def propdef" data-link-for-hint="border-start-start-radius">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-start-start-radius">border-start-start-radius</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-start-end-radius">border-start-end-radius</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-end-start-radius">border-end-start-radius</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-end-end-radius">border-end-end-radius</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius">&lt;'border-top-left-radius'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>Same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius①">border-top-left-radius</a> 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>Same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius②">border-top-left-radius</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Same as corresponding physical <a class="property" data-link-type="propdesc">border-*-radius</a> properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius③">border-top-left-radius</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-left-radius" id="ref-for-propdef-border-bottom-left-radius">border-bottom-left-radius</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-right-radius" id="ref-for-propdef-border-top-right-radius">border-top-right-radius</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-right-radius" id="ref-for-propdef-border-bottom-right-radius">border-bottom-right-radius</a> properties.
  The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①⑤">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①③">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation①⓪">text-orientation</a>.</p>
   <h3 class="heading settled" data-level="4.7" id="logical-shorthand-keyword"><span class="secno">4.7. </span><span class="content"> Four-Directional Shorthand Properties: the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin" id="ref-for-propdef-margin②">margin</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding" id="ref-for-propdef-padding">padding</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">border-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style">border-style</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color">border-color</a> shorthands</span><a class="self-link" href="#logical-shorthand-keyword"></a></h3>
   <p>The shorthand properties for margin, padding, and border
  set values for physical properties by default.
  But authors can specify
  the <dfn class="dfn-paneled css" data-dfn-for="margin, padding, border-color, border-style, border-width" data-dfn-type="value" data-export id="valdef-margin-logical">logical</dfn> keyword
  at the beginning of the property value
  to indicate that the values map to the flow-relative properties instead of the physical ones.</p>
   <p class="issue" id="issue-cfb9f389"><a class="self-link" href="#issue-cfb9f389"></a> The proposed syntax for this feature is <a href="https://github.com/w3c/csswg-drafts/issues/1282">under discussion</a> and is almost guaranteed to change from what is described here.
    This section remains in the draft to promote discussion of alternatives,
    to document the affected properties,
    and to specify the expected impact on the interpretation
    of whatever syntactic switch is ultimately chosen. </p>
   <p>The following <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> shorthand properties
  accept the <a class="css" data-link-type="maybe" href="#valdef-margin-logical" id="ref-for-valdef-margin-logical">logical</a> keyword:</p>
   <ul>
    <li><a class="property" data-link-type="propdesc" href="#propdef-inset" id="ref-for-propdef-inset②">inset</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin" id="ref-for-propdef-margin③">margin</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding" id="ref-for-propdef-padding①">padding</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width①">border-width</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style①">border-style</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color①">border-color</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding" id="ref-for-propdef-scroll-padding">scroll-padding</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin" id="ref-for-propdef-scroll-margin">scroll-margin</a> 
   </ul>
   <p>The syntax for these properties is effectively changed by replacing</p>
<pre class="prod">&lt;<var>value-type</var>><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑦">{1,4}</a></pre>
   <p>with</p>
<pre class="prod">logical<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> &lt;<var>value-type</var>><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑧">{1,4}</a></pre>
   <p>When the <a class="css" data-link-type="maybe" href="#valdef-margin-logical" id="ref-for-valdef-margin-logical①">logical</a> keyword is present in the value,
  the values that follow are assigned to its flow-relative longhands
  as follows:</p>
   <ul>
    <li>If only one value is set, the value applies to all four flow-relative <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#longhand" id="ref-for-longhand①">longhands</a>. 
    <li>If two values are set, the first is for block-start and block-end,
      the second is for inline-start and inline-end. 
    <li>If three values are set, the first is for block-start,
      the second is for inline-start and inline-end,
      and the third is for block-end. 
    <li>If four values are set, they apply to
      the block-start, inline-start, block-end, and inline-end sides
      in that order. 
   </ul>
   <div class="example" id="example-119016c9">
    <a class="self-link" href="#example-119016c9"></a> In the following example, the two rules are equivalent: 
<pre class="lang-css highlight"><c- f>blockquote </c-><c- p>{</c->
  <c- k>margin</c-><c- p>:</c-> logical <c- m>1</c-><c- l>em</c-> <c- m>2</c-><c- l>em</c-> <c- m>3</c-><c- l>em</c-> <c- m>4</c-><c- l>em</c-><c- p>;</c->
<c- p>}</c->
<c- f>blockquote </c-><c- p>{</c->
  <c- k>margin-block-start</c-><c- p>:</c->  <c- m>1</c-><c- l>em</c-><c- p>;</c->
  <c- k>margin-inline-start</c-><c- p>:</c-> <c- m>2</c-><c- l>em</c-><c- p>;</c->
  <c- k>margin-block-end</c-><c- p>:</c->    <c- m>3</c-><c- l>em</c-><c- p>;</c->
  <c- k>margin-inline-end</c-><c- p>:</c->   <c- m>4</c-><c- l>em</c-><c- p>;</c->
<c- p>}</c->
</pre>
   </div>
   <h2 class="heading settled" data-level="5" id="acknowledgements"><span class="secno">5. </span><span class="content">Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
   <p>Cameron McCormack, David Baron, Shinyu Murakami, Tab Atkins</p>
   <h2 class="heading settled" data-level="6" id="changes"><span class="secno">6. </span><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2>
   <p>Changes since the previous Working Draft include:</p>
   <ul>
    <li>Removing the features for logical background and border-images.
        (These ideas may be revisited in a future draft.) 
    <li>Adding the logical <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius" id="ref-for-propdef-border-radius">border-radius</a> longhands. 
   </ul>
   <p>Changes between the earlier Editors Drafts and the <a href="https://www.w3.org/TR/2017/WD-css-logical-1-20170518/">18 May 2017 First Public Working Draft</a> include:</p>
   <ul>
    <li>Making all properties cascade using the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑤">writing mode</a> specified on the element, not on its parent. 
    <li>Making the ordering of longhands within <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin" id="ref-for-propdef-margin④">margin</a>-like shorthands put inline-start before inline-end. 
    <li>Adding the <a class="property" data-link-type="propdesc">*-inline</a> and <span class="property">*-block</span> shorthand forms for margins/borders/padding. 
    <li>Renaming the <span class="css">offset-*</span> properties to <a class="property" data-link-type="propdesc">inset-*</a> and marking an issue for discussion. 
    <li>Adding an Introduction section. 
    <li>Updating to current terminology of CSS Writing Modes. 
    <li>Miscellaneous prose cleanup. 
   </ul>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#propdef-block-size">block-size</a><span>, in §4.1</span>
   <li><a href="#propdef-border-block">border-block</a><span>, in §4.5.4</span>
   <li><a href="#propdef-border-block-color">border-block-color</a><span>, in §4.5.3</span>
   <li><a href="#propdef-border-block-end">border-block-end</a><span>, in §4.5.4</span>
   <li><a href="#propdef-border-block-end-color">border-block-end-color</a><span>, in §4.5.3</span>
   <li><a href="#propdef-border-block-end-style">border-block-end-style</a><span>, in §4.5.2</span>
   <li><a href="#propdef-border-block-end-width">border-block-end-width</a><span>, in §4.5.1</span>
   <li><a href="#propdef-border-block-start">border-block-start</a><span>, in §4.5.4</span>
   <li><a href="#propdef-border-block-start-color">border-block-start-color</a><span>, in §4.5.3</span>
   <li><a href="#propdef-border-block-start-style">border-block-start-style</a><span>, in §4.5.2</span>
   <li><a href="#propdef-border-block-start-width">border-block-start-width</a><span>, in §4.5.1</span>
   <li><a href="#propdef-border-block-style">border-block-style</a><span>, in §4.5.2</span>
   <li><a href="#propdef-border-block-width">border-block-width</a><span>, in §4.5.1</span>
   <li><a href="#propdef-border-end-end-radius">border-end-end-radius</a><span>, in §4.6</span>
   <li><a href="#propdef-border-end-start-radius">border-end-start-radius</a><span>, in §4.6</span>
   <li><a href="#propdef-border-inline">border-inline</a><span>, in §4.5.4</span>
   <li><a href="#propdef-border-inline-color">border-inline-color</a><span>, in §4.5.3</span>
   <li><a href="#propdef-border-inline-end">border-inline-end</a><span>, in §4.5.4</span>
   <li><a href="#propdef-border-inline-end-color">border-inline-end-color</a><span>, in §4.5.3</span>
   <li><a href="#propdef-border-inline-end-style">border-inline-end-style</a><span>, in §4.5.2</span>
   <li><a href="#propdef-border-inline-end-width">border-inline-end-width</a><span>, in §4.5.1</span>
   <li><a href="#propdef-border-inline-start">border-inline-start</a><span>, in §4.5.4</span>
   <li><a href="#propdef-border-inline-start-color">border-inline-start-color</a><span>, in §4.5.3</span>
   <li><a href="#propdef-border-inline-start-style">border-inline-start-style</a><span>, in §4.5.2</span>
   <li><a href="#propdef-border-inline-start-width">border-inline-start-width</a><span>, in §4.5.1</span>
   <li><a href="#propdef-border-inline-style">border-inline-style</a><span>, in §4.5.2</span>
   <li><a href="#propdef-border-inline-width">border-inline-width</a><span>, in §4.5.1</span>
   <li><a href="#propdef-border-start-end-radius">border-start-end-radius</a><span>, in §4.6</span>
   <li><a href="#propdef-border-start-start-radius">border-start-start-radius</a><span>, in §4.6</span>
   <li><a href="#propdef-inline-size">inline-size</a><span>, in §4.1</span>
   <li><a href="#propdef-inset">inset</a><span>, in §4.3</span>
   <li><a href="#propdef-inset-block">inset-block</a><span>, in §4.3</span>
   <li><a href="#propdef-inset-block-end">inset-block-end</a><span>, in §4.3</span>
   <li><a href="#propdef-inset-block-start">inset-block-start</a><span>, in §4.3</span>
   <li><a href="#propdef-inset-inline">inset-inline</a><span>, in §4.3</span>
   <li><a href="#propdef-inset-inline-end">inset-inline-end</a><span>, in §4.3</span>
   <li><a href="#propdef-inset-inline-start">inset-inline-start</a><span>, in §4.3</span>
   <li><a href="#inset-properties">inset properties</a><span>, in §4.3</span>
   <li><a href="#valdef-margin-logical">logical</a><span>, in §4.7</span>
   <li><a href="#logical-property-group">logical property group</a><span>, in §4</span>
   <li><a href="#mapping-logic">mapping logic</a><span>, in §4</span>
   <li><a href="#propdef-margin-block">margin-block</a><span>, in §4.2</span>
   <li><a href="#propdef-margin-block-end">margin-block-end</a><span>, in §4.2</span>
   <li><a href="#propdef-margin-block-start">margin-block-start</a><span>, in §4.2</span>
   <li><a href="#propdef-margin-inline">margin-inline</a><span>, in §4.2</span>
   <li><a href="#propdef-margin-inline-end">margin-inline-end</a><span>, in §4.2</span>
   <li><a href="#propdef-margin-inline-start">margin-inline-start</a><span>, in §4.2</span>
   <li><a href="#propdef-max-block-size">max-block-size</a><span>, in §4.1</span>
   <li><a href="#propdef-max-inline-size">max-inline-size</a><span>, in §4.1</span>
   <li><a href="#propdef-min-block-size">min-block-size</a><span>, in §4.1</span>
   <li><a href="#propdef-min-inline-size">min-inline-size</a><span>, in §4.1</span>
   <li><a href="#propdef-padding-block">padding-block</a><span>, in §4.4</span>
   <li><a href="#propdef-padding-block-end">padding-block-end</a><span>, in §4.4</span>
   <li><a href="#propdef-padding-block-start">padding-block-start</a><span>, in §4.4</span>
   <li><a href="#propdef-padding-inline">padding-inline</a><span>, in §4.4</span>
   <li><a href="#propdef-padding-inline-end">padding-inline-end</a><span>, in §4.4</span>
   <li><a href="#propdef-padding-inline-start">padding-inline-start</a><span>, in §4.4</span>
   <li><a href="#valdef-logical-page-selector-recto">:recto</a><span>, in §3</span>
   <li><a href="#valdef-logical-page-recto">recto</a><span>, in §3</span>
   <li><a href="#valdef-logical-page-selector-verso">:verso</a><span>, in §3</span>
   <li><a href="#valdef-logical-page-verso">verso</a><span>, in §3</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom-color">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-left-radius">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-left-radius">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-left-radius</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom-left-radius">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-right-radius">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-right-radius">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-right-radius</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom-right-radius">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-style">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom-style">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom-width">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-color">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a> <a href="#ref-for-propdef-border-color①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-left">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-left">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-left-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-left-color">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-left-style">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-left-style">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-left-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-left-width">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-radius">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-radius">6. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-right">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-right">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-right-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-right-color">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-right-style">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-right-style">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-right-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-right-width">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-style">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-style">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a> <a href="#ref-for-propdef-border-style①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-color">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a> <a href="#ref-for-propdef-border-top-color①">(2)</a> <a href="#ref-for-propdef-border-top-color②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-left-radius">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-left-radius">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a> <a href="#ref-for-propdef-border-top-left-radius①">(2)</a> <a href="#ref-for-propdef-border-top-left-radius②">(3)</a> <a href="#ref-for-propdef-border-top-left-radius③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-right-radius">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-right-radius">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-right-radius</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-right-radius">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-style">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-style">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a> <a href="#ref-for-propdef-border-top-style①">(2)</a> <a href="#ref-for-propdef-border-top-style②">(3)</a>
    <li><a href="#ref-for-propdef-border-top-style③">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-width">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a> <a href="#ref-for-propdef-border-top-width①">(2)</a> <a href="#ref-for-propdef-border-top-width②">(3)</a>
    <li><a href="#ref-for-propdef-border-top-width③">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-width">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a> <a href="#ref-for-propdef-border-width①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin">https://drafts.csswg.org/css-box-3/#propdef-margin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin">1. 
Introduction</a>
    <li><a href="#ref-for-propdef-margin①">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a>
    <li><a href="#ref-for-propdef-margin②">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a> <a href="#ref-for-propdef-margin③">(2)</a>
    <li><a href="#ref-for-propdef-margin④">6. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-bottom">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom">https://drafts.csswg.org/css-box-3/#propdef-margin-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-bottom">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-left">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-left">https://drafts.csswg.org/css-box-3/#propdef-margin-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-left">4. 
Flow-Relative Box Model Properties</a> <a href="#ref-for-propdef-margin-left①">(2)</a> <a href="#ref-for-propdef-margin-left②">(3)</a> <a href="#ref-for-propdef-margin-left③">(4)</a> <a href="#ref-for-propdef-margin-left④">(5)</a> <a href="#ref-for-propdef-margin-left⑤">(6)</a>
    <li><a href="#ref-for-propdef-margin-left⑥">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-right">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-right">https://drafts.csswg.org/css-box-3/#propdef-margin-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-right">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-top">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-top">https://drafts.csswg.org/css-box-3/#propdef-margin-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-top">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a> <a href="#ref-for-propdef-margin-top①">(2)</a> <a href="#ref-for-propdef-margin-top②">(3)</a> <a href="#ref-for-propdef-margin-top③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding">https://drafts.csswg.org/css-box-3/#propdef-padding</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a> <a href="#ref-for-propdef-padding①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-bottom">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-bottom">https://drafts.csswg.org/css-box-3/#propdef-padding-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-bottom">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-left">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-left">https://drafts.csswg.org/css-box-3/#propdef-padding-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-left">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-right">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-right">https://drafts.csswg.org/css-box-3/#propdef-padding-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-right">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-top">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-top">https://drafts.csswg.org/css-box-3/#propdef-padding-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-top">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a> <a href="#ref-for-propdef-padding-top①">(2)</a> <a href="#ref-for-propdef-padding-top②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">1. 
Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-longhand">
   <a href="https://drafts.csswg.org/css-cascade-4/#longhand">https://drafts.csswg.org/css-cascade-4/#longhand</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-longhand">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a>
    <li><a href="#ref-for-longhand①">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-shorthand-property">
   <a href="https://drafts.csswg.org/css-cascade-4/#shorthand-property">https://drafts.csswg.org/css-cascade-4/#shorthand-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shorthand-property">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a>
    <li><a href="#ref-for-shorthand-property①">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-shorthand-property②">(2)</a>
    <li><a href="#ref-for-shorthand-property③">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a>
    <li><a href="#ref-for-shorthand-property④">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a>
    <li><a href="#ref-for-shorthand-property⑤">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a>
    <li><a href="#ref-for-shorthand-property⑥">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a>
    <li><a href="#ref-for-shorthand-property⑦">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-specified-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#specified-value">https://drafts.csswg.org/css-cascade-4/#specified-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-specified-value">4. 
Flow-Relative Box Model Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-longhand">
   <a href="https://drafts.csswg.org/css-cascade-4/#longhand">https://drafts.csswg.org/css-cascade-4/#longhand</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-longhand">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a>
    <li><a href="#ref-for-longhand①">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-used-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#used-value">https://drafts.csswg.org/css-cascade-4/#used-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-value">1. 
Introduction</a> <a href="#ref-for-used-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valuea-def-color">
   <a href="https://drafts.csswg.org/css-color-3/#valuea-def-color">https://drafts.csswg.org/css-color-3/#valuea-def-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valuea-def-color">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-containing-block">
   <a href="https://drafts.csswg.org/css-display-3/#containing-block">https://drafts.csswg.org/css-display-3/#containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block">2.1. 
Logical Values for the caption-side Property</a>
    <li><a href="#ref-for-containing-block①">2.2. 
Flow-Relative Values for the float and clear Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-bottom">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-bottom">https://drafts.csswg.org/css-position-3/#propdef-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-bottom">2. 
Flow-Relative Values: block-start, block-end, inline-start, inline-end</a>
    <li><a href="#ref-for-propdef-bottom①">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-bottom②">(2)</a> <a href="#ref-for-propdef-bottom③">(3)</a> <a href="#ref-for-propdef-bottom④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-left">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-left">https://drafts.csswg.org/css-position-3/#propdef-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-left">2. 
Flow-Relative Values: block-start, block-end, inline-start, inline-end</a>
    <li><a href="#ref-for-propdef-left①">3. 
Flow-Relative Page Classifications</a> <a href="#ref-for-propdef-left②">(2)</a>
    <li><a href="#ref-for-propdef-left③">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-left④">(2)</a> <a href="#ref-for-propdef-left⑤">(3)</a> <a href="#ref-for-propdef-left⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-right">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-right">https://drafts.csswg.org/css-position-3/#propdef-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-right">2. 
Flow-Relative Values: block-start, block-end, inline-start, inline-end</a>
    <li><a href="#ref-for-propdef-right①">3. 
Flow-Relative Page Classifications</a> <a href="#ref-for-propdef-right②">(2)</a>
    <li><a href="#ref-for-propdef-right③">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-right④">(2)</a> <a href="#ref-for-propdef-right⑤">(3)</a> <a href="#ref-for-propdef-right⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-top">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-top">https://drafts.csswg.org/css-position-3/#propdef-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-top">2. 
Flow-Relative Values: block-start, block-end, inline-start, inline-end</a>
    <li><a href="#ref-for-propdef-top①">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-top②">(2)</a> <a href="#ref-for-propdef-top③">(3)</a> <a href="#ref-for-propdef-top④">(4)</a> <a href="#ref-for-propdef-top⑤">(5)</a> <a href="#ref-for-propdef-top⑥">(6)</a> <a href="#ref-for-propdef-top⑦">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-scroll-margin">
   <a href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin">https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-scroll-margin">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-scroll-padding">
   <a href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding">https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-scroll-padding">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-table-wrapper-box">
   <a href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box">https://drafts.csswg.org/css-tables-3/#table-wrapper-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-table-wrapper-box">2.1. 
Logical Values for the caption-side Property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-align">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-text-align">https://drafts.csswg.org/css-text-3/#propdef-text-align</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-align">2.3. 
Flow-Relative Values for the text-align Property</a> <a href="#ref-for-propdef-text-align①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-resize">
   <a href="https://drafts.csswg.org/css-ui-4/#propdef-resize">https://drafts.csswg.org/css-ui-4/#propdef-resize</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-resize">2.4. 
Flow-Relative Values for the resize Property</a> <a href="#ref-for-propdef-resize①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-num-range">
   <a href="https://drafts.csswg.org/css-values-4/#mult-num-range">https://drafts.csswg.org/css-values-4/#mult-num-range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-num-range">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a>
    <li><a href="#ref-for-mult-num-range①">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-mult-num-range②">(2)</a>
    <li><a href="#ref-for-mult-num-range③">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a>
    <li><a href="#ref-for-mult-num-range④">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a>
    <li><a href="#ref-for-mult-num-range⑤">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a>
    <li><a href="#ref-for-mult-num-range⑥">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a>
    <li><a href="#ref-for-mult-num-range⑦">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a> <a href="#ref-for-mult-num-range⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2.1. 
Logical Values for the caption-side Property</a>
    <li><a href="#ref-for-comb-one①">2.2. 
Flow-Relative Values for the float and clear Properties</a>
    <li><a href="#ref-for-comb-one②">2.3. 
Flow-Relative Values for the text-align Property</a>
    <li><a href="#ref-for-comb-one③">2.4. 
Flow-Relative Values for the resize Property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-any">
   <a href="https://drafts.csswg.org/css-values-4/#comb-any">https://drafts.csswg.org/css-values-4/#comb-any</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-any">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a> <a href="#ref-for-comb-any①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-direction">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">https://drafts.csswg.org/css-writing-modes-3/#propdef-direction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-direction">1. 
Introduction</a> <a href="#ref-for-propdef-direction①">(2)</a>
    <li><a href="#ref-for-propdef-direction②">4. 
Flow-Relative Box Model Properties</a> <a href="#ref-for-propdef-direction③">(2)</a> <a href="#ref-for-propdef-direction④">(3)</a> <a href="#ref-for-propdef-direction⑤">(4)</a>
    <li><a href="#ref-for-propdef-direction⑥">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a>
    <li><a href="#ref-for-propdef-direction⑦">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a>
    <li><a href="#ref-for-propdef-direction⑧">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a>
    <li><a href="#ref-for-propdef-direction⑨">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a>
    <li><a href="#ref-for-propdef-direction①⓪">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a>
    <li><a href="#ref-for-propdef-direction①①">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a>
    <li><a href="#ref-for-propdef-direction①②">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
    <li><a href="#ref-for-propdef-direction①③">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-end">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#end">https://drafts.csswg.org/css-writing-modes-3/#end</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-end">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a> <a href="#ref-for-end①">(2)</a>
    <li><a href="#ref-for-end②">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-end③">(2)</a>
    <li><a href="#ref-for-end④">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a> <a href="#ref-for-end⑤">(2)</a>
    <li><a href="#ref-for-end⑥">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a> <a href="#ref-for-end⑦">(2)</a>
    <li><a href="#ref-for-end⑧">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a> <a href="#ref-for-end⑨">(2)</a>
    <li><a href="#ref-for-end①⓪">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a> <a href="#ref-for-end①①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-start">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#start">https://drafts.csswg.org/css-writing-modes-3/#start</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-start">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a> <a href="#ref-for-start①">(2)</a>
    <li><a href="#ref-for-start②">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-start③">(2)</a>
    <li><a href="#ref-for-start④">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a> <a href="#ref-for-start⑤">(2)</a>
    <li><a href="#ref-for-start⑥">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a> <a href="#ref-for-start⑦">(2)</a>
    <li><a href="#ref-for-start⑧">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a> <a href="#ref-for-start⑨">(2)</a>
    <li><a href="#ref-for-start①⓪">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a> <a href="#ref-for-start①①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-end">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-end">https://drafts.csswg.org/css-writing-modes-4/#block-end</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-end">2.1. 
Logical Values for the caption-side Property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-start">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-start">https://drafts.csswg.org/css-writing-modes-4/#block-start</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-start">2.1. 
Logical Values for the caption-side Property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flow-relative">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative">https://drafts.csswg.org/css-writing-modes-4/#flow-relative</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flow-relative">1. 
Introduction</a> <a href="#ref-for-flow-relative①">(2)</a>
    <li><a href="#ref-for-flow-relative②">2. 
Flow-Relative Values: block-start, block-end, inline-start, inline-end</a>
    <li><a href="#ref-for-flow-relative③">2.2. 
Flow-Relative Values for the float and clear Properties</a>
    <li><a href="#ref-for-flow-relative④">4. 
Flow-Relative Box Model Properties</a> <a href="#ref-for-flow-relative⑤">(2)</a> <a href="#ref-for-flow-relative⑥">(3)</a> <a href="#ref-for-flow-relative⑦">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-writing-mode-horizontal-tb">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb">https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb">4. 
Flow-Relative Box Model Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-line-relative">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#line-relative">https://drafts.csswg.org/css-writing-modes-4/#line-relative</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-relative">2.1. 
Logical Values for the caption-side Property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-direction-ltr">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr">https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-direction-ltr">4. 
Flow-Relative Box Model Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-physical">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#physical">https://drafts.csswg.org/css-writing-modes-4/#physical</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-physical">4. 
Flow-Relative Box Model Properties</a> <a href="#ref-for-physical①">(2)</a> <a href="#ref-for-physical②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-direction-rtl">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl">https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-direction-rtl">4. 
Flow-Relative Box Model Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-orientation">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation">https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-orientation">1. 
Introduction</a> <a href="#ref-for-propdef-text-orientation①">(2)</a>
    <li><a href="#ref-for-propdef-text-orientation②">4. 
Flow-Relative Box Model Properties</a>
    <li><a href="#ref-for-propdef-text-orientation③">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a>
    <li><a href="#ref-for-propdef-text-orientation④">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a>
    <li><a href="#ref-for-propdef-text-orientation⑤">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a>
    <li><a href="#ref-for-propdef-text-orientation⑥">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a>
    <li><a href="#ref-for-propdef-text-orientation⑦">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a>
    <li><a href="#ref-for-propdef-text-orientation⑧">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a>
    <li><a href="#ref-for-propdef-text-orientation⑨">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
    <li><a href="#ref-for-propdef-text-orientation①⓪">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode">https://drafts.csswg.org/css-writing-modes-4/#writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-writing-mode">1. 
Introduction</a>
    <li><a href="#ref-for-writing-mode①">2.1. 
Logical Values for the caption-side Property</a>
    <li><a href="#ref-for-writing-mode②">2.2. 
Flow-Relative Values for the float and clear Properties</a>
    <li><a href="#ref-for-writing-mode③">4. 
Flow-Relative Box Model Properties</a> <a href="#ref-for-writing-mode④">(2)</a>
    <li><a href="#ref-for-writing-mode⑤">6. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-writing-mode">1. 
Introduction</a> <a href="#ref-for-propdef-writing-mode①">(2)</a>
    <li><a href="#ref-for-propdef-writing-mode②">4. 
Flow-Relative Box Model Properties</a> <a href="#ref-for-propdef-writing-mode③">(2)</a> <a href="#ref-for-propdef-writing-mode④">(3)</a>
    <li><a href="#ref-for-propdef-writing-mode⑤">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a> <a href="#ref-for-propdef-writing-mode⑥">(2)</a> <a href="#ref-for-propdef-writing-mode⑦">(3)</a>
    <li><a href="#ref-for-propdef-writing-mode⑧">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a>
    <li><a href="#ref-for-propdef-writing-mode⑨">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a>
    <li><a href="#ref-for-propdef-writing-mode①⓪">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a>
    <li><a href="#ref-for-propdef-writing-mode①①">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a>
    <li><a href="#ref-for-propdef-writing-mode①②">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a>
    <li><a href="#ref-for-propdef-writing-mode①③">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a>
    <li><a href="#ref-for-propdef-writing-mode①④">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
    <li><a href="#ref-for-propdef-writing-mode①⑤">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-caption-side">
   <a href="https://drafts.csswg.org/css2/tables.html#propdef-caption-side">https://drafts.csswg.org/css2/tables.html#propdef-caption-side</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-caption-side">2.1. 
Logical Values for the caption-side Property</a> <a href="#ref-for-propdef-caption-side①">(2)</a> <a href="#ref-for-propdef-caption-side②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-clear">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-clear">https://drafts.csswg.org/css2/visuren.html#propdef-clear</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-clear">2.2. 
Flow-Relative Values for the float and clear Properties</a> <a href="#ref-for-propdef-clear①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-float">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-float">https://drafts.csswg.org/css2/visuren.html#propdef-float</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-float">2.2. 
Flow-Relative Values for the float and clear Properties</a> <a href="#ref-for-propdef-float①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">https://drafts.csswg.org/css2/visudet.html#propdef-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-height">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a> <a href="#ref-for-propdef-height①">(2)</a> <a href="#ref-for-propdef-height②">(3)</a> <a href="#ref-for-propdef-height③">(4)</a> <a href="#ref-for-propdef-height④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-max-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height">https://drafts.csswg.org/css2/visudet.html#propdef-max-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-height">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a> <a href="#ref-for-propdef-max-height①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-max-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width">https://drafts.csswg.org/css2/visudet.html#propdef-max-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-width">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a> <a href="#ref-for-propdef-max-width①">(2)</a> <a href="#ref-for-propdef-max-width②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-min-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-min-height">https://drafts.csswg.org/css2/visudet.html#propdef-min-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-height">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a> <a href="#ref-for-propdef-min-height①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-min-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-min-width">https://drafts.csswg.org/css2/visudet.html#propdef-min-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-width">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a> <a href="#ref-for-propdef-min-width①">(2)</a> <a href="#ref-for-propdef-min-width②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-page-break-after">
   <a href="https://drafts.csswg.org/css2/page.html#propdef-page-break-after">https://drafts.csswg.org/css2/page.html#propdef-page-break-after</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-page-break-after">3. 
Flow-Relative Page Classifications</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-page-break-before">
   <a href="https://drafts.csswg.org/css2/page.html#propdef-page-break-before">https://drafts.csswg.org/css2/page.html#propdef-page-break-before</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-page-break-before">3. 
Flow-Relative Page Classifications</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">https://drafts.csswg.org/css2/visudet.html#propdef-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-width">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a> <a href="#ref-for-propdef-width①">(2)</a> <a href="#ref-for-propdef-width②">(3)</a> <a href="#ref-for-propdef-width③">(4)</a> <a href="#ref-for-propdef-width④">(5)</a> <a href="#ref-for-propdef-width⑤">(6)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom" style="color:initial">border-bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom-color" style="color:initial">border-bottom-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom-left-radius" style="color:initial">border-bottom-left-radius</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom-right-radius" style="color:initial">border-bottom-right-radius</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom-style" style="color:initial">border-bottom-style</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom-width" style="color:initial">border-bottom-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-color" style="color:initial">border-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-left" style="color:initial">border-left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-left-color" style="color:initial">border-left-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-left-style" style="color:initial">border-left-style</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-left-width" style="color:initial">border-left-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-radius" style="color:initial">border-radius</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-right" style="color:initial">border-right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-right-color" style="color:initial">border-right-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-right-style" style="color:initial">border-right-style</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-right-width" style="color:initial">border-right-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-style" style="color:initial">border-style</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top" style="color:initial">border-top</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-color" style="color:initial">border-top-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-left-radius" style="color:initial">border-top-left-radius</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-right-radius" style="color:initial">border-top-right-radius</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-style" style="color:initial">border-top-style</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-width" style="color:initial">border-top-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-width" style="color:initial">border-width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-box-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-margin" style="color:initial">margin</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-bottom" style="color:initial">margin-bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-left" style="color:initial">margin-left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-right" style="color:initial">margin-right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-top" style="color:initial">margin-top</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding" style="color:initial">padding</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-bottom" style="color:initial">padding-bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-left" style="color:initial">padding-left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-right" style="color:initial">padding-right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-top" style="color:initial">padding-top</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
     <li><span class="dfn-paneled" id="term-for-longhand" style="color:initial">longhand</span>
     <li><span class="dfn-paneled" id="term-for-shorthand-property" style="color:initial">shorthand property</span>
     <li><span class="dfn-paneled" id="term-for-specified-value" style="color:initial">specified value</span>
     <li><span class="dfn-paneled" id="term-for-longhand①" style="color:initial">sub-property</span>
     <li><span class="dfn-paneled" id="term-for-used-value" style="color:initial">used value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valuea-def-color" style="color:initial">&lt;color></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-containing-block" style="color:initial">containing block</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-bottom" style="color:initial">bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-left" style="color:initial">left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-right" style="color:initial">right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-top" style="color:initial">top</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-scroll-snap-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-scroll-margin" style="color:initial">scroll-margin</span>
     <li><span class="dfn-paneled" id="term-for-propdef-scroll-padding" style="color:initial">scroll-padding</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-tables-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-table-wrapper-box" style="color:initial">table wrapper box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-text-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-text-align" style="color:initial">text-align</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-ui-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-resize" style="color:initial">resize</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-mult-num-range" style="color:initial">{a,b}</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
     <li><span class="dfn-paneled" id="term-for-comb-any" style="color:initial">||</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-direction" style="color:initial">direction</span>
     <li><span class="dfn-paneled" id="term-for-end" style="color:initial">end</span>
     <li><span class="dfn-paneled" id="term-for-start" style="color:initial">start</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-end" style="color:initial">block-end</span>
     <li><span class="dfn-paneled" id="term-for-block-start" style="color:initial">block-start</span>
     <li><span class="dfn-paneled" id="term-for-flow-relative" style="color:initial">flow-relative</span>
     <li><span class="dfn-paneled" id="term-for-valdef-writing-mode-horizontal-tb" style="color:initial">horizontal-tb</span>
     <li><span class="dfn-paneled" id="term-for-line-relative" style="color:initial">line-relative</span>
     <li><span class="dfn-paneled" id="term-for-valdef-direction-ltr" style="color:initial">ltr</span>
     <li><span class="dfn-paneled" id="term-for-physical" style="color:initial">physical</span>
     <li><span class="dfn-paneled" id="term-for-valdef-direction-rtl" style="color:initial">rtl</span>
     <li><span class="dfn-paneled" id="term-for-propdef-text-orientation" style="color:initial">text-orientation</span>
     <li><span class="dfn-paneled" id="term-for-writing-mode" style="color:initial">writing mode</span>
     <li><span class="dfn-paneled" id="term-for-propdef-writing-mode" style="color:initial">writing-mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS21]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-caption-side" style="color:initial">caption-side</span>
     <li><span class="dfn-paneled" id="term-for-propdef-clear" style="color:initial">clear</span>
     <li><span class="dfn-paneled" id="term-for-propdef-float" style="color:initial">float</span>
     <li><span class="dfn-paneled" id="term-for-propdef-height" style="color:initial">height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-max-height" style="color:initial">max-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-max-width" style="color:initial">max-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-min-height" style="color:initial">min-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-min-width" style="color:initial">min-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-page-break-after" style="color:initial">page-break-after</span>
     <li><span class="dfn-paneled" id="term-for-propdef-page-break-before" style="color:initial">page-break-before</span>
     <li><span class="dfn-paneled" id="term-for-propdef-width" style="color:initial">width</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-box-3">[CSS-BOX-3]
   <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a>
   <dt id="biblio-css-break-3">[CSS-BREAK-3]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a>
   <dt id="biblio-css-cascade-3">[CSS-CASCADE-3]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-3/">CSS Cascading and Inheritance Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-3/">https://www.w3.org/TR/css-cascade-3/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-color-3">[CSS-COLOR-3]
   <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 19 June 2018. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-position-3">[CSS-POSITION-3]
   <dd>Rossen Atanassov; Arron Eicholz. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. 17 May 2016. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
   <dt id="biblio-css-scroll-snap-1">[CSS-SCROLL-SNAP-1]
   <dd>Matt Rakow; et al. <a href="https://www.w3.org/TR/css-scroll-snap-1/">CSS Scroll Snap Module Level 1</a>. 19 March 2019. CR. URL: <a href="https://www.w3.org/TR/css-scroll-snap-1/">https://www.w3.org/TR/css-scroll-snap-1/</a>
   <dt id="biblio-css-tables-3">[CSS-TABLES-3]
   <dd>Greg Whitworth. <a href="https://www.w3.org/TR/css-tables-3/">CSS Table Module Level 3</a>. 7 March 2017. WD. URL: <a href="https://www.w3.org/TR/css-tables-3/">https://www.w3.org/TR/css-tables-3/</a>
   <dt id="biblio-css-text-3">[CSS-TEXT-3]
   <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 12 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a>
   <dt id="biblio-css-ui-4">[CSS-UI-4]
   <dd>Florian Rivoal. <a href="https://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>. 22 December 2017. WD. URL: <a href="https://www.w3.org/TR/css-ui-4/">https://www.w3.org/TR/css-ui-4/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css21">[CSS21]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-cssom">[CSSOM]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-block-size" id="ref-for-propdef-block-size①">block-size</a>
      <td>&lt;'width'>
      <td>auto
      <td>Same as height and width
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as height, width
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block" id="ref-for-propdef-border-block①">border-block</a>
      <td>&lt;'border-block-start'>
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-color" id="ref-for-propdef-border-block-color①">border-block-color</a>
      <td>&lt;'border-top-color'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-end" id="ref-for-propdef-border-block-end②">border-block-end</a>
      <td>&lt;'border-top-width'> || &lt;'border-top-style'> || &lt;color>
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-end-color" id="ref-for-propdef-border-block-end-color②">border-block-end-color</a>
      <td>&lt;'border-top-color'>
      <td>currentcolor
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding border-*-color properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-end-style" id="ref-for-propdef-border-block-end-style②">border-block-end-style</a>
      <td>&lt;'border-top-style'>
      <td>none
      <td>all elements
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>Same as corresponding border-*-style properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-end-width" id="ref-for-propdef-border-block-end-width②">border-block-end-width</a>
      <td>&lt;'border-top-width'>
      <td>medium
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding border-*-width properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-start" id="ref-for-propdef-border-block-start③">border-block-start</a>
      <td>&lt;'border-top-width'> || &lt;'border-top-style'> || &lt;color>
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-start-color" id="ref-for-propdef-border-block-start-color②">border-block-start-color</a>
      <td>&lt;'border-top-color'>
      <td>currentcolor
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding border-*-color properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-start-style" id="ref-for-propdef-border-block-start-style②">border-block-start-style</a>
      <td>&lt;'border-top-style'>
      <td>none
      <td>all elements
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>Same as corresponding border-*-style properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-start-width" id="ref-for-propdef-border-block-start-width②">border-block-start-width</a>
      <td>&lt;'border-top-width'>
      <td>medium
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding border-*-width properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-style" id="ref-for-propdef-border-block-style①">border-block-style</a>
      <td>&lt;'border-top-style'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-block-width" id="ref-for-propdef-border-block-width①">border-block-width</a>
      <td>&lt;'border-top-width'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-end-end-radius" id="ref-for-propdef-border-end-end-radius①">border-end-end-radius</a>
      <td>&lt;'border-top-left-radius'>
      <td>Same as border-top-left-radius
      <td>all elements
      <td>no
      <td>Same as border-top-left-radius
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding physical border-*-radius properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-end-start-radius" id="ref-for-propdef-border-end-start-radius①">border-end-start-radius</a>
      <td>&lt;'border-top-left-radius'>
      <td>Same as border-top-left-radius
      <td>all elements
      <td>no
      <td>Same as border-top-left-radius
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding physical border-*-radius properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline" id="ref-for-propdef-border-inline①">border-inline</a>
      <td>&lt;'border-block-start'>
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-color" id="ref-for-propdef-border-inline-color①">border-inline-color</a>
      <td>&lt;'border-top-color'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-end" id="ref-for-propdef-border-inline-end②">border-inline-end</a>
      <td>&lt;'border-top-width'> || &lt;'border-top-style'> || &lt;color>
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-end-color" id="ref-for-propdef-border-inline-end-color②">border-inline-end-color</a>
      <td>&lt;'border-top-color'>
      <td>currentcolor
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding border-*-color properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-end-style" id="ref-for-propdef-border-inline-end-style②">border-inline-end-style</a>
      <td>&lt;'border-top-style'>
      <td>none
      <td>all elements
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>Same as corresponding border-*-style properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-end-width" id="ref-for-propdef-border-inline-end-width②">border-inline-end-width</a>
      <td>&lt;'border-top-width'>
      <td>medium
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding border-*-width properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-start" id="ref-for-propdef-border-inline-start②">border-inline-start</a>
      <td>&lt;'border-top-width'> || &lt;'border-top-style'> || &lt;color>
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-start-color" id="ref-for-propdef-border-inline-start-color②">border-inline-start-color</a>
      <td>&lt;'border-top-color'>
      <td>currentcolor
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding border-*-color properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-start-style" id="ref-for-propdef-border-inline-start-style②">border-inline-start-style</a>
      <td>&lt;'border-top-style'>
      <td>none
      <td>all elements
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>Same as corresponding border-*-style properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-start-width" id="ref-for-propdef-border-inline-start-width②">border-inline-start-width</a>
      <td>&lt;'border-top-width'>
      <td>medium
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding border-*-width properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-style" id="ref-for-propdef-border-inline-style①">border-inline-style</a>
      <td>&lt;'border-top-style'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-inline-width" id="ref-for-propdef-border-inline-width①">border-inline-width</a>
      <td>&lt;'border-top-width'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-start-end-radius" id="ref-for-propdef-border-start-end-radius①">border-start-end-radius</a>
      <td>&lt;'border-top-left-radius'>
      <td>Same as border-top-left-radius
      <td>all elements
      <td>no
      <td>Same as border-top-left-radius
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding physical border-*-radius properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-start-start-radius" id="ref-for-propdef-border-start-start-radius①">border-start-start-radius</a>
      <td>&lt;'border-top-left-radius'>
      <td>Same as border-top-left-radius
      <td>all elements
      <td>no
      <td>Same as border-top-left-radius
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding physical border-*-radius properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inline-size" id="ref-for-propdef-inline-size①">inline-size</a>
      <td>&lt;'width'>
      <td>auto
      <td>Same as height and width
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as height, width
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset" id="ref-for-propdef-inset③">inset</a>
      <td>&lt;'top'>{1,4}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-block" id="ref-for-propdef-inset-block②">inset-block</a>
      <td>&lt;'top'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-block-end" id="ref-for-propdef-inset-block-end③">inset-block-end</a>
      <td>&lt;'top'>
      <td>auto
      <td>positioned elements
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding top/right/bottom/left properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-block-start" id="ref-for-propdef-inset-block-start③">inset-block-start</a>
      <td>&lt;'top'>
      <td>auto
      <td>positioned elements
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding top/right/bottom/left properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-inline" id="ref-for-propdef-inset-inline②">inset-inline</a>
      <td>&lt;'top'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-inline-end" id="ref-for-propdef-inset-inline-end③">inset-inline-end</a>
      <td>&lt;'top'>
      <td>auto
      <td>positioned elements
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding top/right/bottom/left properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-inline-start" id="ref-for-propdef-inset-inline-start③">inset-inline-start</a>
      <td>&lt;'top'>
      <td>auto
      <td>positioned elements
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding top/right/bottom/left properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-block" id="ref-for-propdef-margin-block①">margin-block</a>
      <td>&lt;'margin-top'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-block-end" id="ref-for-propdef-margin-block-end②">margin-block-end</a>
      <td>&lt;'margin-top'>
      <td>0
      <td>Same as margin-top
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding margin-* properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-block-start" id="ref-for-propdef-margin-block-start②">margin-block-start</a>
      <td>&lt;'margin-top'>
      <td>0
      <td>Same as margin-top
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding margin-* properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-inline" id="ref-for-propdef-margin-inline①">margin-inline</a>
      <td>&lt;'margin-top'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-inline-end" id="ref-for-propdef-margin-inline-end④">margin-inline-end</a>
      <td>&lt;'margin-top'>
      <td>0
      <td>Same as margin-top
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding margin-* properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-inline-start" id="ref-for-propdef-margin-inline-start④">margin-inline-start</a>
      <td>&lt;'margin-top'>
      <td>0
      <td>Same as margin-top
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding margin-* properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-max-block-size" id="ref-for-propdef-max-block-size①">max-block-size</a>
      <td>&lt;'max-width'>
      <td>none
      <td>same as height and width
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as max-height, max-width
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-max-inline-size" id="ref-for-propdef-max-inline-size①">max-inline-size</a>
      <td>&lt;'max-width'>
      <td>none
      <td>same as height and width
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as max-height, max-width
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-min-block-size" id="ref-for-propdef-min-block-size①">min-block-size</a>
      <td>&lt;'min-width'>
      <td>0
      <td>same as height and width
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as min-height, min-width
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-min-inline-size" id="ref-for-propdef-min-inline-size①">min-inline-size</a>
      <td>&lt;'min-width'>
      <td>0
      <td>same as height and width
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as min-height, min-width
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-block" id="ref-for-propdef-padding-block①">padding-block</a>
      <td>&lt;'padding-top'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-block-end" id="ref-for-propdef-padding-block-end②">padding-block-end</a>
      <td>&lt;'padding-top'>
      <td>0
      <td>all elements
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding padding-* properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-block-start" id="ref-for-propdef-padding-block-start②">padding-block-start</a>
      <td>&lt;'padding-top'>
      <td>0
      <td>all elements
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding padding-* properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-inline" id="ref-for-propdef-padding-inline①">padding-inline</a>
      <td>&lt;'padding-top'>{1,2}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-inline-end" id="ref-for-propdef-padding-inline-end②">padding-inline-end</a>
      <td>&lt;'padding-top'>
      <td>0
      <td>all elements
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding padding-* properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-inline-start" id="ref-for-propdef-padding-inline-start②">padding-inline-start</a>
      <td>&lt;'padding-top'>
      <td>0
      <td>all elements
      <td>no
      <td>As for the corresponding physical property
      <td>by computed value type
      <td>per grammar
      <td>Same as corresponding padding-* properties
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue">
     <strong>Things That Are Unstable</strong> Since implementation of parts of this module is effectively required
  for shipping an implementation of <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes</a> on the Web
  (in order to correctly implement the default HTML styles),
  the CSSWG resolved that
  the requisite features in <a href="#directional-keywords">§ 2 Flow-Relative Values: block-start, block-end, inline-start, inline-end</a> and <a href="#box">§ 4 Flow-Relative Box Model Properties</a> are approved for shipping.
  (See <a href="https://lists.w3.org/Archives/Public/www-style/2017Dec/0043.html">FPWD announcement</a> for additional background.) 
    <p>However, there are a few significant open issues:</p>
    <ul>
     <li>The <span class="css">logical</span> keyword on shorthands,
        because the name of the keyword may change or it may be replaced by some other syntactic marker.
        (This feature will be deferred from this level for further development
        if there is no clearly satisfactory mechanism proposed,
        see <a href="https://github.com/w3c/csswg-drafts/issues/1282">Issue 1282</a>.) 
     <li>Whether flow-relative longhands inherit from their namesake on the parent,
        or are mapped to a physical property and inherit from that property.
        (See <a href="https://github.com/w3c/csswg-drafts/issues/3029">Issue 3029</a>.) 
     <li>Whether shorthands like <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin">margin</a> expand to both sets of longhands,
        or only the ones that were set.
        (See <a href="https://github.com/w3c/csswg-drafts/issues/3030">Issue 3030</a>.) 
    </ul>
     Comments, suggestions, and use cases are welcome on these issues.
  Please file them in GitHub, tweet them to @csswg, or send them to www-style@w3.org. <a href="#issue-3d880eb1"> ↵ </a>
   </div>
   <div class="issue"> There are some open questions on
  the <a href="https://github.com/w3c/csswg-drafts/issues/3029">order of inheritance vs mapping in flow-relative properties</a> and on the <a href="https://github.com/w3c/csswg-drafts/issues/3030">interaction of shorthands and logical properties</a>.<a href="#issue-8d273300"> ↵ </a></div>
   <div class="issue"> The proposed syntax for this feature is <a href="https://github.com/w3c/csswg-drafts/issues/1282">under discussion</a> and is almost guaranteed to change from what is described here.
    This section remains in the draft to promote discussion of alternatives,
    to document the affected properties,
    and to specify the expected impact on the interpretation
    of whatever syntactic switch is ultimately chosen. <a href="#issue-cfb9f389"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="logical-property-group">
   <b><a href="#logical-property-group">#logical-property-group</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-logical-property-group">4. 
Flow-Relative Box Model Properties</a> <a href="#ref-for-logical-property-group①">(2)</a> <a href="#ref-for-logical-property-group②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-block-size">
   <b><a href="#propdef-block-size">#propdef-block-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-block-size">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inline-size">
   <b><a href="#propdef-inline-size">#propdef-inline-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inline-size">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-min-block-size">
   <b><a href="#propdef-min-block-size">#propdef-min-block-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-block-size">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-min-inline-size">
   <b><a href="#propdef-min-inline-size">#propdef-min-inline-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-inline-size">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-max-block-size">
   <b><a href="#propdef-max-block-size">#propdef-max-block-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-block-size">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-max-inline-size">
   <b><a href="#propdef-max-inline-size">#propdef-max-inline-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-inline-size">4.1. 
Logical Height and Logical Width:
the block-size/inline-size,
min-block-size/min-inline-size,
and max-block-size/max-inline-size properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-block-start">
   <b><a href="#propdef-margin-block-start">#propdef-margin-block-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-block-start">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a> <a href="#ref-for-propdef-margin-block-start①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-block-end">
   <b><a href="#propdef-margin-block-end">#propdef-margin-block-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-block-end">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a> <a href="#ref-for-propdef-margin-block-end①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-inline-start">
   <b><a href="#propdef-margin-inline-start">#propdef-margin-inline-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-inline-start">4. 
Flow-Relative Box Model Properties</a> <a href="#ref-for-propdef-margin-inline-start①">(2)</a>
    <li><a href="#ref-for-propdef-margin-inline-start②">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a> <a href="#ref-for-propdef-margin-inline-start③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-inline-end">
   <b><a href="#propdef-margin-inline-end">#propdef-margin-inline-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-inline-end">4. 
Flow-Relative Box Model Properties</a> <a href="#ref-for-propdef-margin-inline-end①">(2)</a>
    <li><a href="#ref-for-propdef-margin-inline-end②">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a> <a href="#ref-for-propdef-margin-inline-end③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-block">
   <b><a href="#propdef-margin-block">#propdef-margin-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-block">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-inline">
   <b><a href="#propdef-margin-inline">#propdef-margin-inline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-inline">4.2. 
Flow-relative Margins:
the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset-block-start">
   <b><a href="#propdef-inset-block-start">#propdef-inset-block-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset-block-start">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-inset-block-start①">(2)</a> <a href="#ref-for-propdef-inset-block-start②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset-block-end">
   <b><a href="#propdef-inset-block-end">#propdef-inset-block-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset-block-end">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-inset-block-end①">(2)</a> <a href="#ref-for-propdef-inset-block-end②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset-inline-start">
   <b><a href="#propdef-inset-inline-start">#propdef-inset-inline-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset-inline-start">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-inset-inline-start①">(2)</a> <a href="#ref-for-propdef-inset-inline-start②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset-inline-end">
   <b><a href="#propdef-inset-inline-end">#propdef-inset-inline-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset-inline-end">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-inset-inline-end①">(2)</a> <a href="#ref-for-propdef-inset-inline-end②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset-block">
   <b><a href="#propdef-inset-block">#propdef-inset-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset-block">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-inset-block①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset-inline">
   <b><a href="#propdef-inset-inline">#propdef-inset-inline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset-inline">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-inset-inline①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset">
   <b><a href="#propdef-inset">#propdef-inset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset">4.3. 
Flow-relative Offsets:
the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands</a> <a href="#ref-for-propdef-inset①">(2)</a>
    <li><a href="#ref-for-propdef-inset②">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding-block-start">
   <b><a href="#propdef-padding-block-start">#propdef-padding-block-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-block-start">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a> <a href="#ref-for-propdef-padding-block-start①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding-block-end">
   <b><a href="#propdef-padding-block-end">#propdef-padding-block-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-block-end">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a> <a href="#ref-for-propdef-padding-block-end①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding-inline-start">
   <b><a href="#propdef-padding-inline-start">#propdef-padding-inline-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-inline-start">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a> <a href="#ref-for-propdef-padding-inline-start①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding-inline-end">
   <b><a href="#propdef-padding-inline-end">#propdef-padding-inline-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-inline-end">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a> <a href="#ref-for-propdef-padding-inline-end①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding-block">
   <b><a href="#propdef-padding-block">#propdef-padding-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-block">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding-inline">
   <b><a href="#propdef-padding-inline">#propdef-padding-inline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-inline">4.4. 
Flow-relative Padding:
the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-start-width">
   <b><a href="#propdef-border-block-start-width">#propdef-border-block-start-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-start-width">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a> <a href="#ref-for-propdef-border-block-start-width①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-end-width">
   <b><a href="#propdef-border-block-end-width">#propdef-border-block-end-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-end-width">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a> <a href="#ref-for-propdef-border-block-end-width①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-start-width">
   <b><a href="#propdef-border-inline-start-width">#propdef-border-inline-start-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-start-width">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a> <a href="#ref-for-propdef-border-inline-start-width①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-end-width">
   <b><a href="#propdef-border-inline-end-width">#propdef-border-inline-end-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-end-width">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a> <a href="#ref-for-propdef-border-inline-end-width①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-width">
   <b><a href="#propdef-border-block-width">#propdef-border-block-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-width">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-width">
   <b><a href="#propdef-border-inline-width">#propdef-border-inline-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-width">4.5.1. 
Flow-relative Border Widths:
the border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width properties and border-block-width and border-inline-width shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-start-style">
   <b><a href="#propdef-border-block-start-style">#propdef-border-block-start-style</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-start-style">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a> <a href="#ref-for-propdef-border-block-start-style①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-end-style">
   <b><a href="#propdef-border-block-end-style">#propdef-border-block-end-style</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-end-style">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a> <a href="#ref-for-propdef-border-block-end-style①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-start-style">
   <b><a href="#propdef-border-inline-start-style">#propdef-border-inline-start-style</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-start-style">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a> <a href="#ref-for-propdef-border-inline-start-style①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-end-style">
   <b><a href="#propdef-border-inline-end-style">#propdef-border-inline-end-style</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-end-style">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a> <a href="#ref-for-propdef-border-inline-end-style①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-style">
   <b><a href="#propdef-border-block-style">#propdef-border-block-style</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-style">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-style">
   <b><a href="#propdef-border-inline-style">#propdef-border-inline-style</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-style">4.5.2. 
Flow-relative Border Styles:
the border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style properties and border-block-style and border-inline-style shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-start-color">
   <b><a href="#propdef-border-block-start-color">#propdef-border-block-start-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-start-color">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a> <a href="#ref-for-propdef-border-block-start-color①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-end-color">
   <b><a href="#propdef-border-block-end-color">#propdef-border-block-end-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-end-color">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a> <a href="#ref-for-propdef-border-block-end-color①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-start-color">
   <b><a href="#propdef-border-inline-start-color">#propdef-border-inline-start-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-start-color">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a> <a href="#ref-for-propdef-border-inline-start-color①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-end-color">
   <b><a href="#propdef-border-inline-end-color">#propdef-border-inline-end-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-end-color">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a> <a href="#ref-for-propdef-border-inline-end-color①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-color">
   <b><a href="#propdef-border-block-color">#propdef-border-block-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-color">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-color">
   <b><a href="#propdef-border-inline-color">#propdef-border-inline-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-color">4.5.3. 
Flow-relative Border Colors:
the border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color properties and border-block-color and border-inline-color shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-start">
   <b><a href="#propdef-border-block-start">#propdef-border-block-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-start">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a> <a href="#ref-for-propdef-border-block-start①">(2)</a> <a href="#ref-for-propdef-border-block-start②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block-end">
   <b><a href="#propdef-border-block-end">#propdef-border-block-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block-end">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a> <a href="#ref-for-propdef-border-block-end①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-start">
   <b><a href="#propdef-border-inline-start">#propdef-border-inline-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-start">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a> <a href="#ref-for-propdef-border-inline-start①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline-end">
   <b><a href="#propdef-border-inline-end">#propdef-border-inline-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline-end">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a> <a href="#ref-for-propdef-border-inline-end①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-block">
   <b><a href="#propdef-border-block">#propdef-border-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-block">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-inline">
   <b><a href="#propdef-border-inline">#propdef-border-inline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-inline">4.5.4. 
Flow-relative Border Shorthands:
the border-block-start, border-block-end, border-inline-start, border-inline-end properties and border-block and border-inline shorthands</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-start-start-radius">
   <b><a href="#propdef-border-start-start-radius">#propdef-border-start-start-radius</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-start-start-radius">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-start-end-radius">
   <b><a href="#propdef-border-start-end-radius">#propdef-border-start-end-radius</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-start-end-radius">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-end-start-radius">
   <b><a href="#propdef-border-end-start-radius">#propdef-border-end-start-radius</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-end-start-radius">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-end-end-radius">
   <b><a href="#propdef-border-end-end-radius">#propdef-border-end-end-radius</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-end-end-radius">4.6. 
Flow-relative Corner Rounding:
the border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-margin-logical">
   <b><a href="#valdef-margin-logical">#valdef-margin-logical</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-margin-logical">4.7. 
Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands</a> <a href="#ref-for-valdef-margin-logical①">(2)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>